Question

我希望我的问题已经多次回答，但我找不到。我正在尝试在容器中创建彼此相邻的2个div。但是，只要我添加内容，它们就会溢出。我已经包含了一个JSFiddle但由于某种原因我的2个div已经出现在容器之外 - 它不在我的本地版本上。我想要内容所在的div以及容器。希望我已经解释好了。

JSFiddle

* {
margin:0px;
padding:0px;
}

body {
    background-color:#C0D498;
}

#page-wrap {
    background-color:#FFF;
    width:940px;
    margin:0 auto;
    margin-top: 40px;
    border-radius: 5px;
    padding: 20px;
}

.logo {
    width:175px;
    height:auto;
}

.banner {
    width:755px;
    height:175px;
    float:right;
    border-radius: 5px;
    background-image:url('images/banner.png');
}

.contentWrap {
    padding-bottom: 20px;
}

.contentMain {
    width:70%;
    background-color:blue;
    float:left;
}
.contentSub {
    width:30%;
    background-color:red;
    float:left;
}

Answer 1

用这个替换你的html：

<div id="page-wrap">
    <div class="banner"></div>         
    <div class="contentWrap">
                <div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
                <div class="contentSub">g</div>
            </div>
    <div style="clear:both; float:none;"></div>
        </div>

重要的是：<div style="clear:both; float:none;"></div>

当然你可以这样做（推荐）

<div class="clear"></div>

和CSS

.clear{clear:both; float:none;}

Answer 2

.contentWrap {overflow：hidden; }

只有这个！

Answer 3

不知道你是否要漂浮你的横幅 http://jsfiddle.net/flocko/fhrpghjb/

.contentWrap {
  padding-bottom: 20px;
  clear: both;
  overflow: hidden;
}

作为经验法则：你浮动的每个元素 - 你应该在父元素中清除。

clearfix类可以帮助您：http://nicolasgallagher.com/micro-clearfix-hack/

浮动div不会扩展容器

3 个答案: