문제
여기 내 시나리오가 있습니다. 나는 그 안에 (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/