0

我有三个div。我想在第一个左边浮动最后两个。但是第 2 个在第 3 个之后浮动。这是为什么？

谢谢！

这是我的代码：

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;}
4

3 回答 3

1

如果你想向左飘，为什么要向右飘？...

向所有三个 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;
}
于 2013-03-25T10:21:29.950 回答
0

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

 | div1 | div2|
 |      | div3|

如果是这样，请记住 float 将 div 置于对象的正常流之外，并使其“粘”在靠近前一个元素的一侧，只有在前一个元素中不再有任何空间时才转到下一行。一个例子：http ://www.w3schools.com/css/tryit.asp? filename=trycss_image_gallery （是的，我知道 w3schools 是邪恶的）注意位置如何随着窗口大小的变化而变化。

于 2013-03-25T06:20:29.053 回答
0

尝试将您float: right;的 ' 更改为float: left;并删除width: 140pxon #visual_holder_second。

实际上，如果您要进行多列布局，请不要害怕使用好的 ol' 表。他们在 90 年代因虐待而名声不佳，但他们仍然有自己的位置。

于 2013-03-25T06:23:21.393 回答