我需要做的是有点复杂的解释,但我会尽力而为。我需要在一个页面中容纳3个不同的div,但是我的左div需要比其他div更大的空间,因此并排对齐是不切实际的,因为彼此并排对齐。我需要在左边增加一个div,在右边再堆叠两个。但是我无法将这两个div合并为一个并使其浮动。因为我需要顶部的一个垂直对齐在左一个的顶部,底部的一个垂直对齐在左一个的底部,而这两个(顶部和底部)则需要在它们的右侧对齐。不知道我是否能够解释,所以这是一张图像,说明我想要完成的工作:

html - 将2个div彼此对齐并向右对齐-LMLPHP

因此,您会看到,左一个占据了大部分空间,较小的占据了顶部和底部,而右边也对准了,在它们之间留有空白。这是我已经拥有的代码:



<div style="display: inline-block;">
  <h3>Left Div</h3>
  <input type="text" name="name">
  <input class="button" type="submit">
</div>

<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
  <h3>Top right div</h3>
  <input type="text" name="name2">
</div>

<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
  <h3>Bottom right div</h3>
  <input type="text" name="name3">
  <input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>





我还想说,在中间的时候(当我只有2个div时),它按照我想要的方式工作,当我添加第三个div时出现了问题,所以我认为这就是问题所在。请注意,我是html的新手,很抱歉,这只是一个简单的解决方法。

最佳答案

我认为关键是等高部分,您可以使用CSS3 flexbox解决它。对于右侧的顶部/底部div,您可以将两个div包装到另一个div中。请参阅下面的简单演示。

jsFiddle



div {
  border: 1px solid aqua;
}
.container {
  display: flex;
}
.left, .right {
  flex: 1;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="left">
    <h3>Left Div</h3>
    <br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="right">
    <div>
      <h3>Top right div</h3>
    </div>
    <div>
      <h3>Bottom right div</h3>
    </div>
  </div>
</div>

09-12 00:30
查看更多