我需要做的是有点复杂的解释,但我会尽力而为。我需要在一个页面中容纳3个不同的div,但是我的左div需要比其他div更大的空间,因此并排对齐是不切实际的,因为彼此并排对齐。我需要在左边增加一个div,在右边再堆叠两个。但是我无法将这两个div合并为一个并使其浮动。因为我需要顶部的一个垂直对齐在左一个的顶部,底部的一个垂直对齐在左一个的底部,而这两个(顶部和底部)则需要在它们的右侧对齐。不知道我是否能够解释,所以这是一张图像,说明我想要完成的工作:
因此,您会看到,左一个占据了大部分空间,较小的占据了顶部和底部,而右边也对准了,在它们之间留有空白。这是我已经拥有的代码:
<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>