Question

我有3个div ...

3 divs

如果我将div向左浮动，它将看起来像这样..

divs floated left

现在，我想要＆＃34; Div 3＆＃34;位于＆＃34; Div 2＆＃34;像这样......

correct div placement

所以，我把

明确：两者

到＆＃34; Div 3＆＃34;但它最终看起来像这样： misplaced div 3

＆＃34; Div 3＆＃34;低于最高处的div，在这种情况下，是＆＃34; Div 1＆＃34; ..我应该做些什么来实现类似于图3的定位？

Answer 1

您有几个选择。

首先，您可以保留所有内容float: left并在父容器上放置一个宽度，以防止将Div3放在顶行。只要paren twidth> 1，宽度就会将其击倒到Div2下面的下一行。 div1和div2的宽度。

其次，你绝对可以定位div。

最后，如果你不想做其中任何一个，最好的办法是使用像Masonry或Isotope这样的JavaScript库。创建这些库是因为在纯CSS中很难实现所需的布局。

Answer 2

我认为你必须使用＆lt; span＆gt;对于内联div。

（无法添加评论，因此回答。）

Answer 3

这是你期待的吗？

<div class="wrapper">
  <div class="Div1"> </div>
  <div class="Div2"> </div>
  <div class="Div3"> </div>
</div>

.wrapper {
    width: 205px;
}
.Div1 {
    background: red;
    width: 100px;
    height:205px;
    margin-bottom:5px;
    float: left;
}
.Div2 {
    background: green;
    width: 100px;
    height:100px;
    margin-bottom:5px;
    float: right;
}
.Div3 {
    background: yellow;
    width: 100px;
    height:100px;
    margin-bottom:5px;
    float: right;
}

JSFiddle Demo

Answer 4

你需要2个外部区域。试试这个JSFiddle

<body>
    <div class="clearfix">
        <div class="left">
            <div class="div1"></div>
        </div>
        <div class="right">
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
    </div>
</body>

CSS

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0px;
    visibility: hidden;
}

.left, .right {
    float: left;
}

.div1 {
    background: red;
    height: 200px;
    width: 100px;
}
.div2, .div3 {
    background: blue;
    height: 100px;
    width: 100px;
}
.div3 {
    background: green;
}

如何将div定位在前一个div之下，而不是低于最大高度的div

4 个答案: