我希望避免使用 position: absolute;
,因为我想保持当父容器缩小时,div会自动排列在下方而不是重叠在一起的功能。
#container {
border:1px solid;
}
#left {
float:left;
width:100px;
height:100px;
background:red;
}
#right {
float:right;
background:blue;
}
ul {
padding:0;
margin:0;
}
ul li {
float:right;
margin-left:20px;
}
<div id="container">
<div id="left">
</div>
<div id="right">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
编辑:我已更新代码示例,以更加符合实际情况。不幸的是,我没有使用固定的宽度/高度,但对于这个特定的问题,红色div可以有固定的宽度/高度。
更新后的Fiddle:http://jsfiddle.net/zdL60bLu/10/
基本上,我希望蓝色div与右下角对齐,当窗口大小缩小时,保持蓝色div下移的功能,而使用绝对定位不会发生这种情况。
这可行吗?
<div style="clear:both;"></div>
,那么没有其他方法,因为您希望这两个div在屏幕不太窄的情况下堆叠在一起,而在同一行中。一个与另一个相反。我认为使用position:absolute然后在父元素上设置min-height或使用媒体查询将position:absolute切换为float(在某些屏幕宽度下)是可以的。 - Hrvoje Golcic