我有三个div
水平堆叠的 s -> 左、中和右。
左右固定宽度为250px
。我希望中心div
具有最大可能的宽度。我该怎么做呢?
一旦将div
其设置为最大可能,我将其div
内部设置margin:0 auto;
为居中对齐。
您定义元素的顺序在这里很重要。在 html 中创建中心 div之前,您需要创建左/右 div 。这是因为浏览器需要先绘制布局的左侧/右侧,然后才能知道中心 div 有多少可用空间。
这是一个例子。http://jsfiddle.net/vtvxb/
您无需进行任何计算即可实现这一目标。你可以通过一些巧妙的 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% 宽度。这允许您的中心列保持在两列之间,但在宽度上保持动态。
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/(推荐阅读)。
宽度将是page body width
- 500px
。