float : left를 사용한 후 새 줄을 어떻게 얻습니까?

float : left를 사용한 후 새 줄을 어떻게 얻습니까?

---

내가하려는 것은 이미지 행, 각 행에 6 개의 이미지가있는 것입니다. 이러한 이미지 중 일부는 다른 이미지가 그 위에 떠 있어야합니다 (오른쪽 하단 모서리가 플러시 됨). 이 스레드에서 작동하도록 가져올 수 있습니다.

HTML에서 한 이미지를 다른 이미지 위에 어떻게 배치합니까?

그러나 지금은 6 번째 이미지 이후에 새 행을 가져올 수 없습니다. 둘 다 <BR>또는 <P>새 줄을 만듭니다. 다음 이미지를 몇 픽셀 아래로 밀어 내지 만 이미지는 여전히 같은 선에 있습니다. 플로트 스타일이 <BR>및 / 또는을 방해하는 것 같습니다 <P>.

나는 새 행을 시작 같은 이미지에 대해 서로 다른 스타일을 사용하여 시도하지 float:none하고 display:block있지만, 어느 쪽도했다. 이상한 점은 새 줄이 7 번째 이미지 이후 에 시작된다는 것입니다 .

지금까지 내가 사용하고있는 것은 다음과 같습니다.

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.containerdivNewLine { float: none; display: block; position: relative; } 
.cornerimage { position: absolute; bottom: 0; right: 0; } 
</style>

<div class="containerdiv">
  <img border="0" height="188" src="myImg" width="133" />
  <img class="cornerimage" height="140" src="imageOnTop" width="105" />
</div>

7 번째 이미지의 경우 새 행을 시작하려고 할 때 'containerdiv'클래스를 'containerdivNewLine'으로 간단히 대체합니다.

---

6 개의 이미지마다 플로트를 "클리어"해야합니다. 따라서 현재 코드를 사용하여 스타일을 다음 containerdivNewLine으로 변경하십시오 .

.containerdivNewLine { clear: both; float: left; display: block; position: relative; } 

---

당신은 또한 사용할 수 있습니다

<br style="clear:both" />

---

명확한 속성을 시도하십시오 .

float는 문서 레이아웃에서 요소를 제거한다는 점을 기억하십시오. 따라서 기본적으로 기본 흐름 레이아웃의 모든 항목을 무시한다는 의미에서 br및 p태그를 "간섭"하는 방식 입니다.

---

또한 그런 방법

<br clear="all" />

---

좀 더 의미가있는 또 다른 접근 방식은 UL을 총 6 개의 이미지 너비로 정의하고 각 LI는 부동 왼쪽으로 정의되고 너비는 정의되어 있습니다. 따라서 LI # 7이 맞을 때 UL의 경계로 이동하여 푸시됩니다. 새 행으로 내려갑니다. / UL 이후에 지우고 싶은 오픈 플로트가 여전히 남아 있지만 페이지의 다음 요소에서 수행하거나 명확한 div로 수행 할 수 있습니다. 여기에 일종의 아이디어가 있습니다. 실제 값을 엉망으로 만들어야 할 수도 있지만 이것은 아이디어를 제공 할 것입니다. 코드가 좀 더 깔끔합니다.

 <style type="text/css"> 
ul#imageSet { width: 600px; margin: 0; padding:0; }
ul#imageSet li { float: left; width: 100px;  height: 188px; margin: 0; padding:0; position: relative; list-style-type: none; }
.cornerimage { position: absolute; bottom: 0; right: 0; } 
h3.nextelement { clear: both; }
</style>


<ul id="imageSet">
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
     <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
</ul>


<h3 class="nextelement">Next Element in Doc</h3>

참고 URL : https://stackoverflow.com/questions/2580772/how-do-i-get-a-new-line-after-using-floatleft