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

Question

嗯，我想像这样显示 3 divs:

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

但是，由于某种原因，发生了这种情况：

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

有一个 JSFiddle 显示了我的意思：https://jsfiddle.net/4mmdamak/

还有一个可能的解决方案是使用position relative和negative margin top：https://jsfiddle.net/4mmdamak/1/

我不想使用 margin tops 因为我不知道第二个的高度 div，所以，我不知道第三个需要上升多少像素 div.

此外，我尝试在第三个 div 上使用 vertical-align: top;，但这没有用。

PD: 我不能把第三个 div 放在第一个 div.

里面

PD2: 此外，我无法创建一个 table 带有两个 td 标签和 rowspan 2.

所以，如果您有任何其他解决方案... 谢谢！

Answer 1

您可以使用 Flexbox

来做到这一点

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  color: white;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.div-1 {
  background: red;
  flex: 4;
}

.div-2 {
  background: blue;
  flex: 1;
}

.right {
  background: green;
  flex: 1;
}

<div class="content">
  <div class="left">
    <div class="div-1">DIv 1</div>
    <div class="div-2">Div 2</div>
  </div>
  
  <div class="right">Div 3</div>
</div>

Answer 2

您需要像这样在左侧添加包装器 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>

和css如下

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

Answer 3

您可以在样式中使用 float，但是：
container 的宽度为 140px，每个内部 div 的宽度为 64px
64 + 64 = 128 和 140 - 128 = 12，如果 container 的宽度是 128px 浮动就可以了！
jsfiddle

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

Display 3 divs, 2 together and the third one under the first

html

css

alignment