두 div가 컨테이너의 전체 너비를 채우지 않을 것입니다.

Question

현재 사이트를 개발 중이고 내 div 두 개를 같은 줄에 두는 데 이상한 문제가 발생했습니다. 문제의 페이지는 여기에 있습니다 : http://bit.ly/13QE7Zi 그리고 내가 고치려고하는 div는 중간에있는 텍스트 div와 그 옆에있는 작은 이미지입니다. CSS에서는 컨테이너 요소의 너비 인 1000px (20 + 640 + 20 + 300 + 20)을 차지하도록이 div를 설정했지만, 이렇게하면 두 번째 div가 다음 줄로 푸시됩니다. 이미지의 가장자리가 페이지의 오른쪽과 제대로 정렬되지 않아 바람직하지 않은 텍스트 div의 폭을 3 픽셀 줄이는 경우에만 작동합니다. Chrome 및 Firefox에서 발생합니다. 나는 페이지의 다른면을 깨뜨리기 때문에 플로트를 사용하지 않기를 바란다. 이 두 div가 같은 줄에 있고 전체 1000px 너비를 채우려면 어떻게해야합니까? 대신 텍스트의 width 3 픽셀을 감소

Answer 1

두 인라인 블록 사이에 '공백'문자가 있기 때문에이 문제가 발생합니다.

HTML은 실제로 모든 공백을 무시하지 않습니다. 두 요소 사이에 1000 개의 공백과 줄 바꿈이있을 수 있으며, HTML은 표시 할 때 1 개의 단일 공백으로 압축합니다.

인라인 블록은 너비가 정확히 1000px로 합쳐 지도록 설정되어 있지만 두 공간 사이에 새로운 공간이 생겨 1 칸 아래로 응축됩니다. 정확한 측정은이 여분의 공간을 고려하지 않으므로 인라인 블록이 다음 줄로 줄 바꿈됩니다.

Answer 2

, 그것이 보이는 방법을 변경하지 않습니다하지만 모두 적합하기위한 충분한 공간을 줄 것이다 .looktrai-text에 padding-right을 감소시킨다.

Answer 3

border-box box-sizing을 사용할 수 있습니다. 그런 식으로 요소의 너비에는 패딩과 테두리가 포함됩니다.

Answer 4

코드를 단순화하고 다음을 수행하여 이미지 주위에 텍스트 배치를 구현할 수도 있습니다.

면책 조항 : 이것은 달성하려는 결과를 바탕으로 한 제안 사항입니다.

1. 는 다음과 같이 #looktrai-content의 내부 .looktrai-text 및 .looktrai-sidediv 된 div에게

2. 형식 HTML을 제거

<div id="looktrai-content" class="clear"> 
    <img src="content/looktrai_side.jpg" alt="" class="align-right" /> 

    <p>My paragraph text</p> 

    <p>My second paragraph</p> 
</div> 

1. 다음 추가 CSS :

img.align-right { 
    float: right; 
    margin: 0 20px 20px; 
} 

결과이 같은 모양 : http://codepen.io/anon/pen/yjdxh

이 청소기는 간단한 방법은 코드를 줄일 수,과 유연성을 극대화 할 수 있습니다.

Answer 5

텍스트 div에 float: left을 사용하고 이미지 div에 float: right을 사용하고 display: inline-block 속성을 제거하십시오. 이렇게하면 바닥 글에 대한 정리 문제가 발생하지만 많은 'clearfix'해킹 중 하나를 사용하여 쉽게 수정할 수 있습니다.내가 선호하는 방법은 this article on CSS Tricks에 따라 부모 컨테이너 div에 .group 클래스를 사용하는 것입니다. 귀하의 경우 이것은 <div id="looktrai-content" class="group">