Question

我正在尝试生成具有不同数量的div的布局，即

   | Large | Large |
|Small | Small | Small |
   | Large | Large |
         ...

大div的宽度为50％，而小div的宽度为33％。

我该如何处理？我将div浮动，以使它们连续排列，但是不确定如何在较大的div下方获得三个较小的div，同时仍确保所有内容都位于中心？

当前方法：

.case-card--large {
  width: 50%;
  float: right;
}

.case-card {
  float: right;
  text-align: center;
  padding: 40px;
  width: 33%;
  border: 1px solid blue;
}

<div class="case-card case-card--large">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card case-card--large">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>

Answer 1

您可以使用CSS技术：flex（MDN docs）。

通过使用display: flex将这些元素放在父容器中，设置其宽度并使其表现为弹性框。以下是我如何操作的示例。 /* show case rules below */下的CSS规则用于直观显示使用弹性框的效果。

#cont {
  display: flex;
  flex-direction: row;
  width: 600px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.case-card {
  width: 33%;
  box-sizing: border-box;
  /* show case rules below */
  background-color: red;
  border: 1px solid black;
}

.case-card--large {
  width: 50%;
  /* show case rules below */
  background-color: yellow;
}

<div id="cont">
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
</div>

edit：我首先使用过justify-content: space-around;，它们使width: 33%的元素在中间彼此相对对齐。将其更改为justify-content: space-between;可确保将外部框对齐到与容器相同的边框，这可能会对OP更具吸引力。 D.Schaller的积分

Answer 2

Here is my solution.

I have used display:inline-block for each box

* {
  box-sizing: border-box;
}
.container {
  font-size: 0; /* to remove space betwen inline elements*/
}

.wrapper {
  font-size: initial;
}

.case-card {
  text-align: center;
  padding: 40px;
  width: calc(100% / 3);
  border: 1px solid blue;
  display: inline-block;
}

.case-card--large {
  width: 50%;
}

<div class="container">
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class="case-card case-card--large">
    <div class="wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class="case-card">
    <div class="wrapper">
      <p>Dummy text</p>
    </div>
  </div>
</div>

Answer 3

You need to include box-sizing:border-box because you are using padding or to put width as width: calc(33% - 80px), also .large class create as subclass or otherwise in your case put !important, because now doesn't work and everything is width 33%

body{
  text-align:center;
}

.case-card {
  box-sizing: border-box;
  display:inline-block;
  text-align: center;
  padding: 40px;
  width: 33.33%;
  border: 1px solid blue;
  margin: 0 -2px;
  
}

.case-card.large{
   width: 50%;
}

<div class="case-card large">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card large">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>

Answer 4

Ok.. So I made little modification in the code and it works quite fine. Hope it helps you out.

Instead of float:right I used

float:left

and added the border to the wrapper class.

https://codepen.io/anon/pen/oMWMBE

.case-card--large {
  width: 50%;
  float: left;
  text-align: center;
}
.wrapper { border: 1px solid blue; }
.case-card {
  float: left;
  text-align: center;
  width: 33.33%;
}

<div class="case-card--large">
  <div class="wrapper">
   <p>Dummy text</p>
  </div>
</div>
<div class="case-card--large">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class="case-card">
  <div class="wrapper">
    <p>Dummy text</p>
  </div>
</div>

多样的div布局

4 个答案: