0

DIV 要素の行と列で構成される HTML ページを作成しています。

行に 1 列、2 列、3 列しか含まれていない場合があり、行にある列の数に応じて各列の幅を変更したいと考えています。

ここに私のHTMLの例があります：

<!-- 1 column -->
<div class="row">
  <!-- Column will be 100% -->
  <div class="col"></div>
</div>

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 75% -->
  <div class="col"></div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 50% -->
  <div class="col"></div>

  <!-- Column will be 25% -->
  <div class="col"></div>
</div>

ただし、これを CSS でどのようにコーディングするかはわかりませんが、誰かが私を正しい方向に向けてくれることを望んでいましたか?

ピーター

4

3 に答える 3

1

CSS で、必要なさまざまなサイズのクラスを設定します。たとえばcol-1、25%、 col-250% などになります。

HTML :

<div class="row">
  <!-- Column will be 100% -->
  <div class="col-4">100%</div>
</div>

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col-1">25%</div>

  <!-- Column will be 75% -->
  <div class="col-3">75%</div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col-1">25%</div>

  <!-- Column will be 50% -->
  <div class="col-2">50%</div>

  <!-- Column will be 25% -->
  <div class="col-1">25%</div>
</div>

CSS :

.col-1, .col-2, .col-3, .col-4 {
    background-color:#ccc;
    float: left;
}
.row {
    clear:left;
}
.col-1 {
    width:25%;
}
.col-2 {
    width: 50%;
}
.col-3 {
    width: 75%;
}
.col-4 {
    width: 100%;
}

JsFiddle の例

于 2015-01-04T22:21:25.970 に答える