强制 div 进入除浮动图像之外的其他 div

Question

我有以下情况：一张图片向左浮动。我无法强制一个 div(id="keywords")（包含一个列表）进入前一个 div(id="categories")（也包含一个列表），但不会破坏图像的浮动（这是如果我做一个 clear:left before the latdiv) 会发生什么，并且如果前一个 div 中的列表很大，应该滑到图像下方。这是我的html代码：

<div id="container">
    <img src="image-source" alt="Image" id="image-id">    
    <div id="media_type">
        <h2>
            Title
        </h2>                                               
    </div>  
    <p>
        <a href="some-url" target="_blank">Feed</a>
    </p>        
    <div id="categs">       
        <b>Categories</b> 
        <ul>
            <li>
                category1
            </li>                               
            <li>
                category2
            </li>                                               
        </ul>
    </div>
    <!-- should go below image if first list is large enough -->
    <div id="keywords">                         
        <b>Keywords</b>
        <ul>    
            <li>
                keyword1
            </li>                               
            <li>
                keyword2
            </li>       
        </ul>                                   
    </div>          
    <div class="clear"></div>
    <div id="will-go-bellow-image"></div>
</div>

和css：

#container #image-id {
    float: left;
    height: 220px;
    margin: 0 10px 10px 0;
    width: 220px;
}
#categs > ul > li, #keywords > ul > li {
    float: left;
    margin-top: 10px;
}

#categs > ul, #keywords > ul {
    list-style: none outside none;
}

谢谢， 阿德里安

Answer 1

为了防止内容环绕浮动元素，您可以将包括#media_type、#categs 和#keywords 的内容通过包装器<div> 进行分割，并将overflow 属性应用于该元素，如下所示：

<div class="wrapper">
    <div id="media_type"> ... </div>  
    <p>
      <a href="some-url" target="_blank">Feed</a>
    </p>        
    <div id="categs"> ... </div>
    <div id="keywords"> ... </div>          
</div>

.wrapper {
  overflow-x: auto; /* or overflow-x: hidden; */
}

WORKING DEMO.

您也可以使用overflow 属性而不是overflow-x 以获得更好的浏览器支持。

---

根据您的评论：

如果类别列表足够大，我想要#keywords 列表滑到图像下方。

我应该注意，由于您正在浮动所有列表项，因此您应该清除 <ul> 列表元素末尾的浮动，以使父级与其浮动的子级一样高。

这可以通过对父元素使用overflow 属性来实现：

Example Here.

#categs > ul,
#keywords > ul {
  list-style: none;
  overflow: hidden; /* This will create a new block formatting context     */
  /* https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context */
}

这会将#keywords 元素推到新行。

您可能还想考虑@MrAlien 的这个好答案：

• What does the CSS rule clear: both do?

Answer 2

http://fiddle.jshell.net/5Z8x9/4/show/

#will-go-bellow-image {
 clear: left;
}