Question

我有三个div。我想在最后两个左边漂浮，在第一个旁边。但第二个漂浮在3ed之后。那是为什么？

谢谢！

这是我的代码：

HTML

<div id="holder_idea"><h5>something</h5></div>
<div id="visual_holder_second">something2</div>
<div id="invest">
<h2>something3</h2></div>

CSS

#holder_idea{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
display:inline-block;
}

#visual_holder_second{
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px;
float:right;
padding-top:32px;
}

#invest{float:right;}

Answer 1

如果你想左转，你为什么要漂浮在右边？...

将float向左移动到所有三个div：http://jsfiddle.net/ngztf/

您的140px宽度比实际内容小很多（为了测试目的，我减少到3.5em）。

div {
    float: left;
    border: 1px solid green;
}
#holder_idea {
    width:200px;
    padding-right:48px;
    padding-left:32px;
    padding-top:32px;
}
#visual_holder_second {
    font-family:"Times New Roman";
    font-size:3.5em;
    text-transform:uppercase;
    line-height:60%;
    width:140px;
    padding-top:32px;
}

Answer 2

我按你希望它看起来像这样

 | div1 | div2|
 |      | div3|

如果是这样，请回想一下浮点数将div放在正常的物体流之外，并使其“粘住”在靠近前一个元素的位置，只有在不再有任何空间的情况下才会进入下一行。前一个。一个例子：http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery （是的，我知道w3schools是邪恶的）注意位置如何随窗口大小的变化而变化。

Answer 3

尝试将float: right;更改为float: left;，然后移除width: 140px上的#visual_holder_second。

实际上，如果您要进行多列布局，请不要害怕使用好的表格。他们在90年代遭受了虐待，但他们仍然有自己的位置。

2 divs浮动右错对齐

3 个答案: