Question

我有三个div div1，div2，div3。

所有div都有float:left所以它们是水平堆叠的：我怎么能通过仅将样式应用到div来分解第三个div2？我尝试使用clear:both和clear:right，但没有任何工作

注意：我只想将样式应用于div2

<div style="float:left">
    <div style="float:left;width:100px;height:100px;border:1px solid red">div1</div>
    <div style="float:left;width:100px;height:100px;border:1px solid red">div2</div>
    <div style="float:left;width:100px;height:100px;border:1px solid red">div3</div>
</div>

http://i.stack.imgur.com/sGdBq.png

Answer 1

将此规则添加到第二个div：

margin-right: calc(100% - 204px)

Codepen：http://codepen.io/anon/pen/NqexXJ

这将应用等于宽度减去100%的{{1}}的右边距（即204px）

这样做，无论您的视口有多宽，第三个(100px + 2px border) * 2都会向下移动到一个新行

Answer 2

使用以下内容... :nth-of-type selector允许您根据公式选择一个或多个基于其来源顺序的元素。

Link

div:nth-of-type(2)
{
     margin-right:calc(100% - 204px)
}

Answer 3

尝试将此代码添加到div2

float: none;
overflow: hidden;

Fiddle

Answer 4

如果我以正确的方式理解，你想要像这样分解第三个div。

div{
    border:1px solid red;
    width:50px;
    height:50px;
    float:left;
}

#quadrado{
    position:relative;
    width:150px;
    height:auto;
}

<div id="quadrado">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

原始jsfiddle

如何清除浮动到水平对齐的div

4 个答案: