Html 如何将div定位在上一个div下方，而不是最大高度的div下方_Html_Css

Html 如何将div定位在上一个div下方，而不是最大高度的div下方

html css

Html 如何将div定位在上一个div下方，而不是最大高度的div下方,html,css,Html,Css,我有三个分区如果我将div浮动到左侧，它将如下所示现在，我想把“div3”放在“div2”下面，就像这样所以，我把清楚：两者都有到“Div 3”，但结果是这样的： “Div 3”位于具有最大高度的Div下方，在本例中，该高度为“Div 1”。。我应该怎么做才能实现与图3类似的定位？我认为您必须使用进行内联div （无法添加评论，因此回答。）这是您所期望的吗 <div class="wrapper"> <div class="Div1"> </d

我有三个分区

如果我将div浮动到左侧，它将如下所示

现在，我想把“div3”放在“div2”下面，就像这样

所以，我把

清楚：两者都有

到“Div 3”，但结果是这样的：

“Div 3”位于具有最大高度的Div下方，在本例中，该高度为“Div 1”。。我应该怎么做才能实现与图3类似的定位？

我认为您必须使用进行内联div

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

这是您所期望的吗

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


.包装纸{
宽度：205px；
}
.1分部{
背景：红色；
宽度：100px；
身高：205px；
边缘底部：5px；
浮动：左；
}
.第2分部{
背景：绿色；
宽度：100px；
高度：100px；
边缘底部：5px；
浮动：对；
}
.第3分部{
背景：黄色；
宽度：100px；
高度：100px；
边缘底部：5px；
浮动：对；
}

您有几个选择

首先，您可以保持所有内容

float:left

，并在父容器上放置一个宽度，以防止

Div3

被放置在顶行。只要paren twidth大于div1和Div2的宽度，则宽度将向下移动到Div2下面的下一行

第二，你完全可以定位div

最后，如果你不想做这两件事，最好的选择是使用像或这样的JavaScript库。创建这些库是因为您想要的布局在纯CSS中很难实现。

您需要两个outerDiv。试试这个

您的

div

元素是否具有固定的

width

？div宽度均为100px@rox容器如何？它的宽度是多少？好吧，我们就说，在这个例子中，它是350px。如何确定

尺寸？他们会改变吗？是否还会有其他的

s？你想要达到的效果的目的是什么？这些因素可能会影响适合您的解决方案类型。

<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>

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