문제

여기 내 시나리오가 있습니다. 나는 그 안에 (n) 자식 요소가있는 컨테이너 div가 있습니다. 이 경우 컨테이너 div에 2 개의 div가 있다고 가정합니다.

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

컨테이너 DIV는 뷰포트의 비율 (80%)이 될 것입니다. 자, 내가 찾고있는 것은이 두 내부 divs (col1 & col2)가 서로 인라인되어 같은 양의 공간을 차지하는 것입니다. 따라서 결과는 다음과 같이 보일 것입니다.

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+  

또는 컨테이너 너비가 변경되면 다음과 같은 결과가 발생해야합니다.

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

내부 div는 항상 너비가 같고 서로 분리되어 있습니다. 이것은 테이블 레이아웃과 유사하지만 가능한 경우 테이블을 사용하지 않습니다. 나는 부동 및 divs를 인라인으로 표시하는 것과 같은 다양한 기술을 사용하지 않았습니다. 그들은 결코 올바르게 정렬 할 수없는 것 같습니다.

도움이 되었습니까?

해결책

테이블 셀은 자동으로 늘어날 수 있습니다. 정확히 불가능합니다 div, 따라서 각 열에 대한 적절한 너비를 손으로 지정해야합니다. 예를 들어:

#col1, #col2 {
    float: left;
    width: 50%;
}

다른 팁

col1 및 col2 스팬 (divs 아님)을

vertical-align:top
display:inline-block
width:50%

분명히 (여백/패딩을 설명하기 위해 너비를 조정하고 마진/패딩에 백분율을 사용하여 100% 미만으로 추가하는 것이 좋습니다.http://ejohn.org/blog/sub-pixel-problems-in-css/)

내가 선호하는 솔루션

외부 컨테이너에 대한 위치를 사용하십시오.

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

중간에 약 2%를 남겨 두십시오. 그만큼 #col1 그리고 #col2 지금 정렬해야합니다.

다른 솔루션

CSS3 : 사용 column-count: 2 그리고 먼저 열을 끊습니다 div.

당신이 정말로 떠 다니는 느낌이라면, 만하십시오 #col1 { float: left; width: 50%; }

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

아마도 사용했을 수도 있습니다 display: table; 도움이 될 것이다? http://jsfiddle.net/g4dgz/119/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top