0

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

4

2 回答 2

2

我已将内联样式移至样式表，以使您的生活更轻松。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/

于 2013-09-13T13:36:27.383 回答
1

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

例如

<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>
于 2013-09-13T13:31:49.437 回答