Question

我正在编写一个HTML页面，其中包含DIV元素中的行和列。

有时一行可能只包含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中对此进行编码，并希望有人能指出我正确的方向？

彼得

Answer 1

最简单的方法是在row div中添加另一个类，指定它包含多少个div：

<!-- 3 columns -->
<div class="row col3">
  <!-- 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>

并相应地添加样式：

.col3 div {
   width: 33%;
}

这会在div中提供所有div - 元素，其中col3类的宽度为33％。

Answer 2

根据您想要的尺寸设置不同宽度（100%，75%，50%等）的网格类，并将其添加到div：< / p>

<强> HTML

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

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

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

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

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

<强> CSS

html,body{
    width: 100%;
}

.row{
    width: 100%;
    overflow: hidden;
}

.col{
    background: red;
    height: 20px;
}

.full{
    width: 100%;
    float: left;
}

.three-quarters{
    width: 75%;
    background: blue;
    float: left;
}

.half{
    width: 50%;
    background: black;
    float: left;
}

.quarter{
    width: 25%;
    float: left;
    background: yellow;
}

FIDDLE

Answer 3

在CSS中设置您想要的不同大小的类。例如，col-1将为25％， col-2 50％等等......

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 example

根据父元素中元素的数量更改元素的宽度

3 个答案: