浮动元素被前一个元素下推
Posted
技术标签:
【中文标题】浮动元素被前一个元素下推【英文标题】：floated element being pushed down by previous element 【发布时间】：2015-03-27 04:52:04 【问题描述】：http://jsfiddle.net/4gw8wank/
我有 3 个容器作为响应式页面的一部分。在移动视图中，它们必须按顺序显示——蓝色、红色、绿色，像这样堆叠在一起......
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
这很好，但是在桌面体验中，使用相同的标记，它们必须如上图所示显示，即蓝色和绿色容器在右侧，宽度固定，红色容器在左，红色容器必须跨越页面的剩余宽度，如下所示：
我看到一个问题，在较小的分辨率下，绿色容器会被向下推，见下文
有什么办法可以解决这个问题吗？
【问题讨论】：
【参考方案1】：到目前为止，我知道，如果你想像你在问题中提到的那样以不同的顺序为桌面显示 div，请更改你的 html 结构，如this，
在桌面上显示不同的 html，以及我上面为较小设备链接的那个（使用 mediaQuery）。
Demo（在我找不到之前，我已经在 SO 上看到过类似的问题）
<!-- for mobile -->
<div class="test1 hidden-lg hidden-md hidden-sm">
<div>
<div class="right blue">
<p>some text some text some text some text some text some text some text some text </p>
</div>
<div class="right green">
<p>some text some text some text some text some text some text some text some text </p>
</div>
</div>
<div class="left red">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
</div>
<!-- for desktop -->
<div class="test1 hidden-xs">
<div class=" blue">
<p>some text some text some text some text some text some text some text some text </p>
</div>
<div class=" red">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
<div class=" green">
<p>some text some text some text some text some text some text some text some text </p>
</div>
</div>
【讨论】：
谢谢！使用两个不同的 html 模板可能是最后的手段，但这会起作用，即使我没有使用引导程序，我也明白了这个概念。【参考方案2】：您可以使用以下样式：
.test1
padding-right:200px;
.right
float:right;
width:200px;
margin-right:-200px;
clear:right;
.left
float:left;
width:100%;
Example
Example with media query stacking
【讨论】：
很好.. 理想情况下，我希望所有元素都因其他原因浮动，您已对其进行了排序 - 谢谢！ 如果我想要 test1 的 1px 边框底部怎么办 @NaeemShaikh 您可以像添加其他样式一样添加它：jsfiddle.net/4gw8wank/14 你在这种情况下输入了overflow:hidden。给你..它真的很好的解决方案（我也+1），但我不鼓励溢出：隐藏只是为了占据孩子（这不是为什么使用溢出：隐藏）
通常我会添加一个 clearfix 但在这种情况下溢出会导致相同的效果 - 减少打字;)【参考方案3】：
这是实现您想要做的正常行为，您可以使用：
1- css 计算函数
<!DOCTYPE html>
<html>
<head>
<style>
.rightfloat:right; clear:right; width:200px
.left
display: block;
overflow: hidden;
max-width: calc(100% - 200px);
float: left;
.blue
background:blue;
.green
background:green;
.redbackground:red;
</style>
</head>
<body>
<div class="test1">
<div class="right blue">
<p>some text some text some text some text some text some text some text some text </p>
</div>
<div class="left red">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
<div class="right green">
<p>some text some text some text some text some text some text some text some text </p>
</div>
</div>
</body>
</html>【讨论】：
我认为 IE8 不支持 css calc，不幸的是我必须支持，谢谢@Tambo！【参考方案4】：我使用百分比宽度和针对较小屏幕尺寸的媒体查询提出了这个解决方案。希望对您有所帮助：
http://jsfiddle.net/ben220/rjef89uw/
<div class="blue">
<p>some text some text some text some text some text some text some text some text </p>
</div>
<div class="red">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
<div class="green">
<p>some text some text some text some text some text some text some text some text </p>
</div>
*
box-sizing: border-box;
div
height: 120px;
border: 1px solid transparent;
.blue
background:blue;
width: 30%;
float: right;
.green
background:green;
width: 30%;
float: right;
.red
background: red;
float: left;
width: 70%;
@media screen and ( max-width: 580px ) and ( min-width: 1px )
.blue, .green, .red
float: none;
width: 100%;
【讨论】：
以上是关于浮动元素被前一个元素下推的主要内容，如果未能解决你的问题，请参考以下文章
关于floatabsolute，fixed谁的z-index大！