div :如何更改宽度

Question

起初我使用表格，但页面很慢然后我尝试替换表并使用 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。但我想相对跨页（以相同的方式查看任何分辨率）

Answer 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/

Answer 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>