我有三个div应该对齐的问题,以便两个div(div1和div2)在左侧,一个div(div3,与组合的div1和div2一样高)在右侧。我不确定如何解决它,并且我不想使用浮点数,因为第三个div应该紧挨着这两个div,而不是jsut浮在右边。
HTML:
<div class="container">
<div class="test1">
</div>
<div class="test3">
</div>
<div class="test2">
</div>
</div>
CSS:
.container {
width:260px;
}
.test1 {
display:inline-block;
vertical-align:top;
width:200px;
height:50px;
background-color:red;
}
.test2 {
display:inline-block;
vertical-align:top;
width:200px;
height:50px;
background-color:blue;
}
.test3 {
display:inline-block;
width:50px;
height:100px;
background-color:black;
}
这是小提琴:
Fiddle
你能帮我这个忙吗?可以使用另一种技术来完成此操作,但是这些元素必须粘在一起,而不仅仅是浮动,因为当我使之响应时,浮动元素将分离。
最佳答案
您可以使用头寸属性
.test1
{
position:absolute;
top:0;
left:0;
width:200px;
height:50px;
background-color:red;
}
.test2
{
position:absolute;
top:50px;
left:0;
width:200px;
height:50px;
background-color:blue;
}
.test3
{
position:absolute;
top:0;
left:200px;
width:50px;
height:100px;
background-color:black;
}
重要
不要忘记设置其相对父位置
.container {
width:260px;
position:relative;
margin:10px;
}