1

私はそれらのDIVを持っています

<div class='content'>
  <div class='div2'>content 2</div>
  <div class='div2'>content 2</div>
  <div class='div2'>content 2content 2</div>
  <div class='div2'>content 2</div>
  <div class='div1'>content 1</div>
</div>

メイン div は固定サイズ = 980px で、その中に DIV クラス 'div1' があり、右にフロートされ、固定サイズです。クラス DIV2 の DIVS を次のようにしたいだけです。

私はこのCSSコードを持っています:

.content { width:980px; overflow: hidden; border: 1px solid #ccc; padding:5px;}
.div1 { overflow: hidden; float:right; width: 140px;}
.div2 { float:left; width: auto; border-right: 1px solid #ccc; text-align:center;}

しかし、私は2を達成することはできません。残りのサイズ740pxをすべて埋めるように自動幅

4

3 に答える 3

1

最も簡単な方法は、テーブルを使用することです。おそらくその方法はご存じでしょう。

<div class='content'>
    <table class="divs2">
        <tr>
        <td class='div2'>content 2</td>
        <td class='div2'>content 2</td>
        <td class='div2'>content 2content 2</td>
        <td class='div2'>content 2</td>
        </tr>
    </table>
  <div class='div1'>content 1</div>
</div>

CSS:

.content { width:980px; overflow: hidden; border: 1px solid #ccc; padding:5px;}
.div1 { overflow: hidden; float:right; width: 140px;}
.divs2{ float:left; width:740px;  }
.div2 { border-right: 1px solid #ccc; text-align:center;}

これをチェックしてください：http://jsfiddle.net/UCJA3/

于 2013-01-26T19:37:04.077 に答える
0

width: 20% on .div2を に設定してみませんか?

于 2013-01-26T19:28:36.327 に答える
0

最初に「.div-2」を外側のコンテナにラップします。

<div class='content'>
   <div class="div-2-wrapper">
      <div class='div2'>content 2</div>
      <div class='div2'>content 2 content 2</div>
      <div class='div2'>content 2</div>
      <div class='div2'>content 2</div>
  </div>
  <div class='div1'>content 1</div>
</div>

次に、「div-2-wrapper」クラスに 840px の幅 (残りの合計スペース) を指定し、左にフロートします。

.div-2-wrapper{
    float: left;
    width: 840px;   
}

最後に、各「div-2」クラスに 209px の幅を与えます。幅を 210 ピクセルではなく 209 にしたい理由は、それぞれに 1 ピクセルの右境界線が含まれているためです。jsフィドル

于 2013-01-26T20:13:00.607 に答える