Question

我想构建一些非常简单的东西，可悲的是，它非常复杂:-)。我有一个清单。每个项目都需要屏幕的1/3，因此它们始终是并排的三个项目。但是第一项需要屏幕的2/3。它应该看起来像在图片上。我不想为此嵌套标签。这是否只能通过flexbox实现（因为它也必须在ReactNative中工作）？我已经尝试了一切，从flexbox看了规格。但我无法完成这项工作。感谢您的帮助！

这是布局，其外观应为： layout

Answer 1

实际上，您可以使用float来完成此操作。只要只有您的第一个元素需要以这种方式排列，此方法就可以使用。

.container {
  width: 600px;
}
.container::after {
  content: '';
  display: block;
  clear: both;
}

.container > div {
  float: left;
  box-sizing: border-box;
  padding: 1px;
}
.inner {
  width: 100%;
  padding-bottom: 100%;
  background: black;
}
.one-third {
  width: 33.333333333%;
}
.two-thirds {
  width: 66.66666666%;
}

<div class="container">
<div class="two-thirds"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
</div>

Answer 2

AFAIK，您将需要一个用于Box1 + Box2 / 2的伸缩框（在box2和box2之间，另一个带有方向列的伸缩框）。另一个代表3,4和5，另一个代表6,7,8。

您是静态渲染元素还是动态生成元素？如果您尝试以动态方式进行操作，则可能需要使用js来识别哪个盒子更大或更小。

使用CSS Flexbox构建列表，其中第一项大于其他项

2 个答案: