我的问题是 - 如何将div放在另一个具有最小高度样式属性的div的底部。 看起来像这样
|-------------------|
|wrapper |
|----------|--------|
|min-height|min-heig|
| div | div |
|----------|--------|
|div that keeps |
| disappearing |
|-------------------|
所以我的问题是,如果min-height divs正在扩展,那么“不断消失的div”会在这些div的扩展下流动,我该如何解决? 代码 -
<div id="wrapper">
<div id="left" style="float:left;min-height:200px;">
content
</div>
<div id="right" style="min-height:200px;">
content
</div>
<div id="disappearing" style="height:100px;">
content
</div>
</div>
答案 0 :(得分:2)
我认为在最小高度div和消失的div之间使用清除元素足以解决您的问题。
<div id="wrapper">
<div id="left" style="border: 1px solid Red;float:left;min-height:200px;height:600px;">content</div>
<div id="right" style="border: 1px solid Green;min-height:200px; height:400px;">content</div>
<div style="clear:both;"></div>
<div id="disappearing" style="border: 1px solid Blue;height:100px;">content</div>
</div>
答案 1 :(得分:0)
老实说,在这种情况下,最可靠和可维护的解决方案是使用网格系统。一篇优秀的文章是Chris Coyier's "Don't Overthink It Grids"。
这是基本的,减少的位:
<强> HTML:强>
<div id="wrapper">
<div class="grid">
<div id="left" class="col-1-2 module-min-200">
content
</div>
<div id="right" class="col-1-2 module-min-200">
content
</div>
</div>
<div class="grid">
<div id="disappearing" class="module-fixed-100">
content
</div>
</div>
</div>
<强> CSS:强>
[class*='col-'] {
float: left;
}
.col-1-2 { width: 50%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }
.col-1-8 { width: 12.5%; }
.col-1-3 { width: 33.33%; }
.col-2-3 { width: 66.66%; }
.grid:after {
content: "";
display: table;
clear: both;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
padding-right: 20px;
}
[class*='col-']:last {
padding-right: 0;
}
.grid-pad {
padding: 20px 0 20px 20px;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
.module-fixed-100 { height: 100px; }
.module-min-200 { min-height: 200px; }
答案 2 :(得分:0)
#disappearing{
clear:both;
width:100%;
}