0

最初はテーブルを使っていたのですが、ページが遅くなったので、テーブルを置き換えてDIVを使用してみました。6 つの列を取得したいと考えていたところ、次のコードが見つかりました。

<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

I've moved the inline styles to a stylesheet, to make your life easier. Using display:table for the parent and display:table-cell for the children, you can spread them evenly, no matter the number of children.

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;
}

Demo: 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 に答える