0

我有三个div水平堆叠的 s -> 左、中和右。

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

一旦将div其设置为最大可能，我将其div内部设置margin:0 auto;为居中对齐。

4

4 回答 4

2

您定义元素的顺序在这里很重要。在 html 中创建中心 div之前，您需要创建左/右 div 。这是因为浏览器需要先绘制布局的左侧/右侧，然后才能知道中心 div 有多少可用空间。

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

于 2012-09-18T14:43:44.397 回答
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% 宽度。这允许您的中心列保持在两列之间，但在宽度上保持动态。

于 2012-09-18T14:46:33.833 回答
1

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/（推荐阅读）。

于 2012-09-18T15:12:40.150 回答
0

宽度将是page body width- 500px。

于 2012-09-18T14:36:47.810 回答