内联块未正确对齐答案

【问题标题】：Inline blocks not aligning properly内联块未正确对齐
【发布时间】：2014-10-23 22:14:08
【问题描述】：

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

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

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

【问题讨论】：

如果第三个也应该在 2 个 div 旁边，为什么不将它们全部浮动到左边。我的意思是浮动的语义目的是这样做对吗？
因为 div3 介于 div1 和 div2 之间。即使这三个都浮动。
另一个可能的原因是您的容器不够大，无法容纳所有三个 div。 div 的总宽度为 450 像素，而您的容器只有 260 像素。尝试将宽度增加到 500 像素。
那么他们将排成一行。 div1 和 div2 必须在不同的行上，而 div3 必须与这两行一样高，并且位于 div1 和 div2 的右侧。
您不喜欢使用浮点数，但请描述您对浮点数的问题：/ 为什么您不想将浮点数用于实际制作的浮点数？使用margin-top: -50px，就像它所建议的那样只是一个短期的解决方案，现在尝试使它具有响应性并且由于margin-top而不是浮动而有更多的问题。

标签： html css-float css

【解决方案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;
}

【讨论】：

谢谢，但是绝对定位在这里不起作用，因为这两个 div 的左侧有一个图像。它会让它们消失在那个图像后面。
是的，我试过了，但我不能从我的项目中发布 DOM，因为它是分类的。
Okey 试试这个.. 为图像和包含这三个块的容器添加 inline-block 属性
我会在今天完成一件事后立即尝试，我会回来告诉你它是否有效。如果可行，我会选择您的答案作为最佳答案:)。
@Pe-Ter 当然......我试过了......它在 jsfiddle 中工作。

【解决方案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>

【讨论】：

【解决方案3】：

您是否尝试过 div3 的负边距底部和垂直对齐：其他 div 的中间？

只需添加

margin-bottom: -50px;

我的代码在这里：jsfiddle

【讨论】：

【解决方案4】：

试试这个改变：

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

http://jsfiddle.net/xyfryc2j/

如果尺寸是固定的，也许你也可以使用“位置：绝对”：

.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/

【讨论】：