如何在居中的div旁边放置一个div

Question

如何将div放在页面中心的div旁边，这样：

.firstDiv {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

这将div放在页面中间，但如果我想在它旁边添加一个div，该怎么办呢。在这个div我想要一个菜单​​，一个引用或其他东西。在尝试使用position之后，我似乎无法使其工作。

提前致谢，

鲍里斯

---

修改

为了澄清我的意思，请看这张图片：

大广场是主要的＆＃39;居中的div然后我想要一个较小的div。

Answer 1

听起来你最好的选择是将你的页面设置为列。做类似的事情：

<div class="colWrapper">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
</div>

CSS

.colWrapper {
margin:0 auto;

}
.column {
width:33%;
float:left;
}

这样你在1 col中放置的任何东西都在左边，第3个col将是正确的，但是col 2将在中心。如果你想用javascript做的话，你可以得到.offset()。

这是一个小提琴。 http://jsfiddle.net/FZ5DH/

Answer 2

我会像你一样创建你的firstDiv，然后把你的右列放在居中的div中，并将位置绝对放在右边，如下所示：

HTML：

<div class="firstDiv">
    <div class="right-col">
        Menu / Quote
    </div>
    Middle div
</div>

CSS：

.firstDiv {width:300px; height:300px; margin:0 auto; background:red; position:relative; padding:10px; }
.right-col {position:absolute; top:0px; left:100%; width:100px; height:300px; background:blue; padding:10px;}

以下是一个示例：http://jsfiddle.net/QLYDs/

确保你在.firstDiv上有相对位置，否则.right-col上的定位不会正常工作

Answer 3

您可以将div封装在一个部分（或其他块元素）中，将其显示为inline-block，然后使用text-align将它们置于中心位置。

HTML

<section>
    <div>Blah</div>
    <div>Bouh</div>
</section>

CSS

section{
    text-align:center;
}

div{
    display:inline-block;
}

结果

Here's a demo，如果我误解了你的问题，请告诉我。

Answer 4

您可以尝试使用您想要位于居中div旁边的float属性。尽管如此，如果没有HTML和css的其余部分，很难给出准确的答案。另一种选择是使用calc属性......但这可能有点棘手。