두 개의 인라인 블록, 너비 50 % 요소가 두 번째 줄로 줄 바꿈

두 개의 인라인 블록, 너비 50 % 요소가 두 번째 줄로 줄 바꿈

---

이 질문에는 이미 답변이 있습니다.

• HTML에서 공백 무시 [중복] 12 답변

너비가 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>

---

다음을 사용하여 CSS를 통해 공백 제거 할 수 있습니다 공백을 당신이 꽤 HTML 레이아웃을 유지할 수 있습니다. 텍스트를 열 내부에 줄 바꿈하려면 공백을 다시 정상으로 다시 설정하는 것을 잊지 마십시오.

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/

다른 가능한 해결책이 있습니다. 자세한 내용은 bikeshedding CSS3 속성 대안?

---

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

overflow: hidden;

마지막 요소 (또는 모두)에.

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