div : 如何改变宽度答案

【问题标题】：div : how to changethe widthdiv : 如何改变宽度
【发布时间】：2013-09-18 04:57:35
【问题描述】：

一开始我用的是表格，但是页面很慢然后我尝试替换表并使用 DIV。想得到六列，发现这段代码：

<div id="block" style="width:800px">
    <div id="left" style="float:left;width:16.66%;"> left </div>
    <div id="right" style="float:right;width:16.66%;"> right </div>
     <div id="right2" style="float:right;width:16.66%;"> right </div>
     <div id="right2" style="float:right;width:16.66%;"> right </div>
      <div id="right2" style="float:right;width:16.66%;"> right </div>
     <div id="right2" style="float:right;width:16.66%;"> right </div>
</div>

我不想要一个固定的宽度：800px。但是我想在页面上相对比较（看任何分辨率都一样）

【问题讨论】：

以后尽量把样式信息放到css里，这样你的代码更易维护。

标签： html styles width

【解决方案1】：

我已将内联样式移至样式表，以使您的生活更轻松。将display:table 用于父级，display:table-cell 用于子级，无论子级有多少，都可以均匀分布。

HTML

<div id="block">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
</div>

CSS

#block {
    display: table;
    width: 100%;
}
#block div.column {
    display:table-cell;
}

演示：http://jsfiddle.net/ch2pk/

【讨论】：

【解决方案2】：

如果您希望它能够很好地扩展，请改用百分比。

例如

<div id="block" style="width:80%">
<div id="left" style="float:left;width:16.66%;"> left </div>
<div id="right" style="float:right;width:16.66%;"> right </div>
 <div id="right2" style="float:right;width:16.66%;"> right </div>
 <div id="right2" style="float:right;width:16.66%;"> right </div>
  <div id="right2" style="float:right;width:16.66%;"> right </div>
 <div id="right2" style="float:right;width:16.66%;"> right </div>
</div>

【讨论】：

tnx ！但我想看到所有 6 列之间的间隔相等（如您在我的示例中所见）