Question

我有三个div水平堆叠 - ＆gt;左，中，右。

左右都是250px的固定宽度。我希望中心div具有最大可能宽度。我该怎么做？

将div设置为最大值后，我会将div内的margin:0 auto;设置为{{1}}以使其居中对齐。

Answer 1

此处定义元素的顺序非常重要。您需要在之前创建左/右divs ，然后在html中创建中心div。这是因为在知道中心div有多少空间之前，浏览器需要绘制布局的左/右侧。

这是一个例子。 http://jsfiddle.net/vtvxb/

Answer 2

您无需进行任何计算即可实现此目的。您可以通过一些巧妙的HTML结构和一点CSS来实现它！

尝试此操作 - 在此处查看示例：http://jsfiddle.net/zfg6m/1/

<强> HTML

<div class="container">
    <div class="left-col">
        This is my left column!
    </div>
    <div class="right-col">
        This is my right column!
    </div>
    <div class="center-col">
        This is my center column
    </div>
</div>

<强> CSS

.left-col {
  background-color: yellow;
  float: left;   
}

.right-col {
  background-color: orange;
  float: right;  
}

.center-col {
  background-color: blue;   
}

这段代码发生了什么？那么你就是漂浮在中心柱上方的两根柱子。由于两个浮子没有被清除，它们会折叠并形成空间，使中心柱填充100％的区域宽度。这允许您的中心列保留在两列之间，但保持宽度动态。

Answer 3

http://dabblet.com/gist/3743636 '溢出：隐藏'会在这里拯救你。虽然源订单必须如下：

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

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

<div class="center"></div>

你不（不应该）需要为中心div设置保证金; 'overlflow：hidden'用于清除浮动，更多内容在此处：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/（推荐阅读）。

Answer 4

宽度为page body width - 500px。

如何计算中心div的宽度

4 个答案: