将一个居中的Div与一个Div对齐到它的直接右侧

Question

我希望对齐两个div，使得div a位于页面的绝对中心，div b位于div b的右侧。 div a宽320 px，div b宽42 px。重要的是div a位于中心，div b是div'的右边（即div a + div b不在中心）。我似乎无法做到这一点并且遇到障碍。

下面是页面布局的大致轮廓。

| ----- AAAAB ---- |

Answer 1

你可以有一个居中的div，并在其中嵌套2个div;左右有适当的宽度。 HTML将是：

<div class="centred">
    <div class="left"></div>
    <div class="right"></div>
</div>

中心的风格是：

div.centred {
    width: 404px; /* This is 320 + 42 + 42 */
    height: 100%;
    margin-left:auto;
    margin-right:auto;
}

左边的div：

div.left {
    width: 320px;
    height: 100%;
    background-color:green;
    float:left;
    margin-left: 42px;
}

右边：

div.right {
    width: 42px;
    height: 100%;
    background-color:red;
    float:right;
}

这为您提供了一个320像素宽（绿色）的居中div，右侧（红色）宽度为42像素宽。

仅供参考：如果您希望轻松且对应地调整对象，请查看Bootstrap

Answer 2

这很简单：

<div class="centered-div">
    <div class="attached-div"></div>
</div>

和css：

.centered-div{
    position: relative;
    margin: auto;
}
.attached-div{
    position: absolute;
    left: 100%;
}

这里是fiddle