我有三个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;
}

10-05 20:40
查看更多