Question

我有以下情况：一张图像漂浮在左边。我无法强制一个div（id =“keywords”）（包含一个列表）去上一个div（id =“categories”）（也包含一个列表），但没有打破图像的浮动（这是如果我做了一个明确的事情：在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>分区的内容并应用{该元素的{3}}属性如下：

<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; */
}

<强> overflow

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

根据你的评论：

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

我应该注意，由于你是浮动所有列表项，你应该清除<ul>列表元素末尾的浮点数，以使父项与浮动子项一样高。

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

<强> WORKING DEMO

#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元素推送到新行。

您可能还想从Example Here

中考虑这个好的答案

@MrAlien

Answer 2

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

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

除了漂浮图像之外，力div除了其他div之外

2 个答案: