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

【问题标题】：Changing widths of element according to number of elements in parent element根据父元素中的元素数量更改元素的宽度
【发布时间】：2015-01-04 22:05:18
【问题描述】：

我正在编写一个由 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 中编写代码，希望有人能指出正确的方向？

彼得

【问题讨论】：

标签： html css row col

【解决方案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%;
}

这将在一个具有类col3 33% 宽度的div 中提供所有div 元素。

【讨论】：

我明白，但是列的数量在整个应用程序中是动态的，这意味着更多的 PHP 代码。我应该在问题中提到这一点。
我忘了我将有一个 PHP 变量来确定该行中有多少列。我会接受这个答案，因为它是最有效的方法！谢谢
我明白了。谢谢 :) 请注意：通过 PHP 添加 CSS 类是最好的解决方案，其他一切都意味着复杂的 CSS 或 JS hack。
该变量将读取 column-2、column-3 或只是 column，因此我可以将该变量传递到 HTML 文档中！谢谢

【解决方案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

【讨论】：

【解决方案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

【讨论】：