将居中的 Div 与 Div 对齐到其紧邻的右侧

Question

我希望对齐两个 div，这样 div a 位于页面的绝对中心，div b 位于 [=18= 的右侧] b. div a 为 320 像素宽，div b 为 42 像素宽。重要的是 div a 在中间，div b 在 div a 的右边（即 div a + div b 不在中央）。我似乎无法正确理解并遇到障碍。

下面是页面布局的粗略轮廓。

|-----aaaab----|

Answer 1

你可以有一个居中的 div，并在其中嵌套 2 div； left 和 right 具有适当的宽度。 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;
}

这为您提供了一个居中 div，宽度为 320 像素（绿色），右侧（红色）为 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

将居中的 Div 与 Div 对齐到其紧邻的右侧

Aligning a Centered Div with a Div to its Immediate Right

html

css

alignment