Question

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

你可以帮我解决这个问题吗？它可以用不同的技术完成，但这些元素必须粘在一起，而不仅仅是浮动，因为当我使它响应时，浮动的元素将分开。

Answer 1

您可以使用位置属性

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

Answer 2

<div class="container">
<div class="test1">
</div>
<div class="test3">
</div>
<div class="test2">
</div>
</div>
<style>
.test2 {
display: inline-block;
width: 200px;
height: 50px;
background-color: blue;
}
.test1 {
display: inline-block;
width: 196px;
height: 50px;
background-color: red;
}
.test3 {
width: 50px;
height: 100px;
background-color: black;
display: inline-block;
}
</style>

Answer 3

您是否尝试过div3的负余量 - 底部和其他div的vertical-align：middle？

添加

margin-bottom: -50px;

我的代码在这里：jsfiddle

Answer 4

尝试此更改：

.test3 {
        display:inline-block;
        width:50px;
        height:100px;
        background-color:black;
        margin-bottom: -50%;
        vertical-align: top;
    }

http://jsfiddle.net/xyfryc2j/

如果尺寸固定，也许你也可以使用“position：absolute”：

.container {
    position: relative; width: 250px; height: 100px;
}
.test1 {
    position: absolute; top: 0; left: 0;
    width:200px;
    height:50px;
    background-color:red;
}
.test2 {
    position: absolute; bottom: 0; left: 0;
    width:200px;
    height:50px;
    background-color:blue;
}
.test3 {
    position: absolute; top: 0; right: 0;
    width:50px;
    height:100px;
    background-color:black;
}

http://jsfiddle.net/nmg4ek3j/1/

您也可以将浮动用于您的目的：

.container {
    width: 250px;
}
.test1 {
    float: left;
    width:200px;
    height:50px;
    background-color:red;
}
.test2 {
    float: left;
    width:200px;
    height:50px;
    background-color:blue;
}
.test3 {
    float: right;
    width:50px;
    height:100px;
    background-color:black;
}

http://jsfiddle.net/rjwg6w9h/1/

内联块未正确对齐

4 个答案: