Question

我有3 div我想分别位于页面的左侧，中间和右侧，看起来像是：

[左侧面板] [中间面板] [右侧面板]

我试过这个：

<div id="left panel" style="display: inline-block; float: left;"></div>

<div id="mid panel" style="display: inline-block; margin:auto ; float:none;"></div>

<div id="right panel" style="display: inline-block; float:right; "></div>

但mid panel未与页面中间对齐。

编辑：

我打算对齐页面左侧，中间和右侧的3个面板，这样无论Web浏览器的尺寸如何，面板都将占据整个网页。

即。我想将mid panel与页面中间对齐，而不是与其他2 div的中间对齐。

Answer 1

你是否尝试过为所有div设置浮动？

Answer 2

将display: inline-block;放在中间<div />

上

Answer 3

考虑这个html：

<div id="container">
    <div class="left panel">left</div>
    <div class="mid panel">middle</div>
    <div class="right panel">right</div>
</div>

http://jsfiddle.net/b5TDN/

当浮动元素时，你可能想要设置它们的宽度属性（使用'px'或'％'），并且不要忘记在它们的容器上放置“：after ...”以便它将获得其中三列中最高的一列的全高。这个技巧也被称为“clearfix”......

位置DIV左，中，右

3 个答案: