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

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 中添加另一个 class，指定它包含多少 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 元素具有 class col3 33% 的宽度。

Answer 2

只需根据您想要的大小设置不同宽度（100%、75%、50% 等）的网格类，然后将其添加到 div:

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

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

Changing widths of element according to number of elements in parent element

html

css

row

col