1
2 열 레이아웃을 만들고 각 행의 첫 번째 항목을 왼쪽으로 떠올리게 할 때 문제가 발생했습니다. 요소의 텍스트가 의도 한 것보다 훨씬 더 큰했다 경우, 행 항목이 아래로 밀려 때문에, 대신에이 같이 찾고, 휴식 것이 :"clear : both;"를 추가하는 이유는 무엇입니까? 떠 다니는 항목 행이 콘텐츠 푸시 오버와 관련된 문제를 해결하면?
은 다음과 같습니다
코드의 존재 :
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
CSS :
,536,.layout {
list-style: none;
}
.layout > li {
vertical-align: top;
width: 49%;
}
.layout > li:nth-child(odd) {
margin-right: 1%;
float: left;
}
.layout > li:nth-child(even) {
margin-left: 1%;
float: right;
}
어느 것이 효과가 있지만 길게 만들면 깨질 수 있습니다.
우리는이 라인을 추가하는 경우 :
.layout > li:nth-child(even) + li {
clear: both;
}
그것은 상관없이 내가 던질 것, 바로 완벽하게 작동하지 않습니다.
어째서?
을 포함하는 이미지를 편집 할 수있는 명성을 가진 사람을 감사하겠습니다. –
'float'을 추가하면 컨텍스트가 종료되었다고 말하는 * clear *되어야하는 새로운 * 블록 형식화 컨텍스트가 생성됩니다. [this] (https://developer.mozilla.org/en-US/docs/)를 참조하십시오. 웹/가이드/CSS/Block_formatting_context) – kukkuz
@kukkuz 이해합니다! 그러나 나는 어떻게 떠돌아 다닐 수 있습니까? 왼쪽과 맑은 것 : 둘다; 동일한 항목에 대해 왜 3 단 (첫 번째 행) 요소를 모두 지우면 정확히 작동합니까? –