Html 显示3个div，2个在一起，第三个在第一个div下_Html_Css_Alignment

Html 显示3个div，2个在一起，第三个在第一个div下

html css

Html 显示3个div，2个在一起，第三个在第一个div下,html,css,alignment,Html,Css,Alignment,我想显示3个div，如下所示： [ DIV 1 ] [ ] [ ] [ DIV 2 ] [ DIV 3 ] [ ] 但是，出于某种原因，这种情况会发生： [ DIV 1 ] [ ] [ ] [ DIV 2 ] [ ] [ DIV 3 ] 有一个JSFIDLE显示了我的意思：还有一种可能的解决方案是使用相对位置和负边缘顶部：我不想使用边距顶部，因为我不知道第二个div的高度，所以，我不知道第三个

我想显示3个div，如下所示：

[ DIV 1 ] [       ]
[       ] [ DIV 2 ]
[ DIV 3 ] [       ]

但是，出于某种原因，这种情况会发生：

[ DIV 1 ] [       ]
[       ] [ DIV 2 ]
          [       ]
[ DIV 3 ]

有一个JSFIDLE显示了我的意思：

还有一种可能的解决方案是使用相对位置和负边缘顶部：

我不想使用边距顶部，因为我不知道第二个div的高度，所以，我不知道第三个div需要增加多少像素

此外，我还尝试使用

垂直对齐：top在第三个div上，但这是无用的
PD:我不能把第三个div放在第一个div里面
PD2:此外，我无法创建一个包含两个td标记的表，其行跨度为2
所以，如果你有其他的解决方案谢谢
您可以使用Flexbox

.content{
最小高度：100vh；
显示器：flex；
弯曲方向：行；
颜色：白色；
}
.左{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.div-1{
背景：红色；
弹性：4；
}
.div-2{
背景：蓝色；
弹性：1；
}
.对{
背景：绿色；
弹性：1；
}

第一组
第2组
第3组
您需要像这样在左侧添加一个包装器div
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <div id = 'left_container'>
            <div id = 'one'> Left Upper</div>
            <div id = 'two'>Left Lower</div>
        </div> <!-- end left -->
        <div id = 'right_column'>Right</div>
    </body>
</html>

您可以在样式中使用浮动，但是：

container
的宽度为140px
，每个div
内部的宽度为64px


64+64=128
和140-128=12
，如果容器的宽度128px
浮动将起作用

您不能更改html的结构吗？还有一个注意事项。。显示内联块在其左侧添加4px的边距。。因此，每当使用display:inline块时，给父div指定字体大小：0。它将处理添加的额外边距。我之前说过，我不能将第一个和第三个div放在一起。
body{
    height:700px;
}
#left_container{
    width: 65%;
    height:700px;
    background-color:black;
    float:left;
}
#one{
    width:100%;
    height:70%;
    background-color:blue;
    float:left;
}

#two{
    width:100%;
    height:30%;
    background-color:green;
    float:left;
}
#right_column{
    width:35%;
    height:100%;
    background-color:red;
    float:left;
}