Html 内联块未正确对齐

我有一个问题，三个div应该对齐，这样两个div（div1和div2）在左边，一个div（div3，与div1和div2的组合一样高）在右边。我不知道如何解决这个问题，我不想使用浮动，因为第三个div应该紧挨着这两个div，而不是右侧浮动的jsut

HTML:

这是小提琴：

---

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

您可以使用position属性

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

.test2{
显示：内联块；
宽度：200px；
高度：50px；
背景颜色：蓝色；
}
.test1{
显示：内联块；
宽度：196px；
高度：50px；
背景色：红色；
}
.test3{
宽度：50px；
高度：100px；
背景色：黑色；
显示：内联块；
}

您是否尝试过将负边距底部用于div3，将垂直对齐：中间用于其他div

加上

margin-bottom: -50px;

我的代码在此：

尝试此更改：

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

如果尺寸固定，您也可以使用“位置：绝对”：

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

您还可以使用浮动来实现以下目的：

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

---

如果第三个也应该在2个div的右侧，为什么不将它们全部浮动到左侧呢。我的意思是，float的语义目的就是要做到这一点，因为div3介于div1和div2之间。还有一个可能的原因是你的容器不够大，不能容纳所有的三个div。div的总宽度是450px，而容器只有260px。试着将宽度增加到500px。那么它们将在一行中。Div1和div2必须在单独的行上，而div3必须与这两行一样高，并且位于Div1和div2的右侧。您不想使用浮动，但请描述您的浮动问题：/为什么您不想为实际制作的浮动使用浮动？使用

margin-top:-50px

，就像它建议的那样，只是短期的解决方案，现在尝试使其响应更快，因为

margin-top

比float有更多的问题。谢谢，但是绝对定位在这里不起作用，因为这两个div的左边有一个图像。这会让它们消失在图像后面。是的，我试过了，但我不能从我的项目中发布DOM，因为它是机密的。好的，试试这个。。将内联块属性添加到图像和包含这三个块的容器中。我今天完成一件事后会立即尝试，我会回来告诉您它是否有效。如果有效，我会选择你的答案作为最佳答案：）@Pe Ter当然。。。我试过了。。它在jsfiddle中工作。

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

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

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