두 개의 인라인 블록, 폭 50% 요소가 두 번째 선으로 감깁니다.

두 개의 인라인 블록, 폭 50% 요소가 두 번째 선으로 감깁니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

HTML에서 공백 무시 (12개 답변)

마감됨9년 전에.

50% 너비의 공간을 가진 두 개의 기둥을 갖고 싶고, 부유물은 피하고 싶습니다.그래서 저는 사용하려고 생각했습니다.display:inline-block.

요소가 99% 너비(예: 50%, 49%, http://jsfiddle.net/XCDsu/2/ )에 추가되면 예상대로 작동합니다.

100% 너비(예: 50%, 50%, http://jsfiddle.net/XCDsu/3/ )를 사용하면 두 번째 열이 두 번째 줄로 나뉩니다.

왜 그런 것일까요?

그 이유는display:inline-blockHTML의 공백을 고려합니다.사이의 공백을 제거하는 경우div예상대로 작동합니다.실시간 예: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

예쁜 HTML 레이아웃을 유지할 수 있도록 화이트스페이스를 사용하여 CSS를 통해 화이트스페이스를 제거할 수 있습니다.텍스트를 열 안으로 감싸려면 공백을 다시 일반으로 설정하는 것을 잊지 마십시오.

IE9, Chrome 18, FF 12에서 테스트됨

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

참고: 2016년에는 다음을 사용할 수 있습니다.flexbox이 문제를 더 쉽게 해결하기 위해.

이 방법은 IE7+ 및 모든 주요 브라우저에서 올바르게 작동하며, 수많은 복잡한 뷰포트 기반 웹 애플리케이션에서 시도되고 테스트되었습니다.

<style>
    .container {
        font-size: 0;
    }

    .ie7 .column {
        font-size: 16px; 
        display: inline; 
        zoom: 1;
    }

    .ie8 .column {
        font-size:16px;
    }

    .ie9_and_newer .column { 
        display: inline-block; 
        width: 50%; 
        font-size: 1rem;
    }
</style>

<div class="container">
    <div class="column">text that can wrap</div>
    <div class="column">text that can wrap</div>
</div>

라이브 데모: http://output.jsbin.com/sekeco/2

IE7/8에 대한 이 방법의 유일한 단점은 다음과 같습니다.body {font-size:??px}em/% 기반 글꼴 고정에 대한 기준으로 사용됩니다.

IE7/IE8 특정 CSS는 IE의 조건부 주석을 사용하여 제공될 수 있습니다.

inline그리고.inline-block요소는 HTML의 공백의 영향을 받습니다.

문제를 해결하는 가장 간단한 방법은 사이의 공백을 제거하는 것입니다.</div>그리고.<div id="col2">참조: http://jsfiddle.net/XCDsu/15/

다른 가능한 해결책이 있습니다. 참조하십시오. 자전거 셰딩 CSS3 속성 대안?

나는 브라우저가 특정 폭에 있을 때 i7에서 이 문제가 계속 발생했습니다.백분율 결과가 정수가 아닌 경우 이전 브라우저는 픽셀 값을 올림합니다.이 문제를 해결하기 위해 설정을 시도할 수 있습니다.

overflow: hidden;

마지막 요소(또는 모든 요소).

언급URL : https://stackoverflow.com/questions/6871996/two-inline-block-width-50-elements-wrap-to-second-line