Question

我有一个产品清单，该清单将是5或6（取决于相关产品）我想始终将第一批2个产品（views-row-1＆2）放在第一行，然后其余的填充第二行的宽度。

例如

[--------产品1 --------] [-------产品2 -------]
[---产品3-] [---产品4-] [----产品5--]

OR

[--------产品1 --------] [-------产品2 -------]
[产品3] [产品4] [产品5] [产品6]

我不能将它们分为两组，但是每种产品都有其自己独特的类别。我可以创建任意数量的包装div。

<div class="views-row-1">
<div class="views-row-2">
<div class="views-row-3">
<div class="views-row-4">
<div class="views-row-5">

我正在使用Bootstrap框架，它是在Drupal中构建的。

如何使用CSS实现此目标？（如果可能）

Answer 1

为此只需使用Flexbox：

.container {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.container > div {
  height:50px;
  border:1px solid;
  box-sizing:border-box;
  background:red;
  flex-grow:1;
  text-align:center;
}
.container > div:nth-child(1),
.container > div:nth-child(2) {
  width:50%;
}

<div class="container">
  <div class="views-row-1">1</div>
  <div class="views-row-2">2</div>
  <div class="views-row-3">3</div>
  <div class="views-row-4">4</div>
  <div class="views-row-5">5</div>
</div>
<div class="container">
  <div class="views-row-1">1</div>
  <div class="views-row-2">2</div>
  <div class="views-row-3">3</div>
  <div class="views-row-4">4</div>
</div>

<div class="container">
  <div class="views-row-1">1</div>
  <div class="views-row-2">2</div>
  <div class="views-row-3">3</div>
  <div class="views-row-4">4</div>
  <div class="views-row-5">5</div>
  <div class="views-row-6">6</div>
</div>

使用bootstrap V4，您可以尝试以下操作：

.row>div {
  height: 50px;
  border: 1px solid;
  box-sizing: border-box;
  background: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container  text-center">
  <div class="row flex-wrap">
    <div class="w-50">1</div>
    <div class="w-50">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>
<div class="container text-center">
  <div class="row flex-wrap">
    <div class="w-50">1</div>
    <div class="w-50">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
  </div>
</div>
<div class="container text-center">
  <div class="row flex-wrap">
    <div class="w-50">1</div>
    <div class="w-50">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
  </div>
</div>

Answer 2

根据您使用的引导框架，通常有预制的类可以让您将网页设计的各个部分划分为若干行，这些部分可以划分为多个列，各列的宽度相等（具有响应性的额外好处））。

    <div class="col-6">
    </div>
    <div class="col-6">

    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>

这样，您可以定义一行总宽度为12的行，其中两个6个元素覆盖整个宽度，子列（在此示例中）为4个，每个子列覆盖1/3。

均等的儿童Divs

2 个答案: