중첩되지 않은 두 개의 div가 있습니다. 둘 다 하나의 상위 div 내에 있으며이 상위 div가 반복됩니다. 따라서 본질적으로 :
<div id='parent_div_1'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_2'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_3'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>나는 각각의 쌍 싶어 child_div_1하고 child_div_2서로 옆에 있습니다. 어떻게 할 수 있습니까?
답변:
#parent_div_1, #parent_div_2, #parent_div_3 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.child_div_1 {
float: left;
margin-right: 5px;
}http://jsfiddle.net/c6242/1/ 에서 작동 예를 확인하십시오.
display: table-cell그가 의미하는 바에 더 가까운 결과를 얻을 것이라고 생각하지만 (그때 그들은 같은 높이 등을 가질 것이기 때문에)이 방법은 확실히 작동 할 것입니다.
display: table-cell는 IE6 IE7에서 지원되지 않습니다. 왼쪽으로 뜨다; 이 작업을 수행하는 적절한 방법입니다.
<tr><td>것입니다. 사용자가 창 크기 를 조정할 때 다른 옵션이 중단되기 때문입니다. 최신 브라우저에서는 display: inline-block일반적으로 가장 좋은 옵션입니다.
div는 기본적으로 block요소 이므로 사용 가능한 전체 너비를 차지하므로 다음을 사용해보십시오.
display:inline-block;은 div즉 요소의 흐름 방해하지 않고 인라인 현재 렌더링되고, 여전히 블록 요소로 취급한다.
나는이 기술이 floats 와 씨름하는 것보다 쉽다는 것을 안다 .
자세한 내용은이 튜토리얼을 참조하십시오 -http : //learnlayout.com/inline-block.html . 나는 그것까지 이어지는 이전 기사조차도 추천 할 것이다. (아니요, 쓰지 않았습니다)
div높이가 같은 2 개의 래퍼를 사용하는 것이 좋습니다. 그러면 그 안에있는 내용이 위쪽으로 정렬 된 것처럼 보입니다.
float:left전체 레이아웃을 재정의하지 않고 훨씬 더 많은 옵션을 제공하기 때문에 훨씬 낫습니다 . 이런 식으로 "그냥 작동"합니다. 여기에서 확인하세요 : jsfiddle.net/SrAQd/4
아래 코드가 매우 유용하다는 것을 알았습니다. 여기에서 검색하는 모든 사용자에게 도움이 될 수 있습니다.
<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>나를 위해 일하는 최고 :
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}float:left하위 div 클래스의 사용자 속성
div 구조를 자세히 확인하십시오. http://www.dzone.com/links/r/div_table.html