html - 如何计算中心 div 的宽度

Question

<分区>

Answer 1

您无需进行任何计算即可实现此目的。您可以通过一些巧妙的 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;   
}

这段代码发生了什么？好吧，您正在 float 放置在中心列上方的两列。由于两个 float 未被清除，它们会折叠并为您的中心列形成空间以填充该区域的 100% 宽度。这允许您的中心列保持在两列之间，但宽度保持动态。