使用CSS的1x 2x2尺寸大盒子旁边的2x2盒子 [英] 2x2 Box beside 1 big 2x2 size box using css

问题描述

是否可以使用flexbox在ul li结构上制作像?我尝试使用clear:lefts以及float:left和right的组合，将正方形的宽度设置为25％，将第1、3或5的正方形的宽度设置为50％.但是不知何故，最后一个方块本身往往会掉在一行上.

Is it possible to make like on a ul li structure with flexbox? I tried making the squares width set on 25% and the 1st, 3rd or the 5th one to 50% width with a trick of clear:lefts and combination of float:left and rights. But somehow the last square tends to drop on a single row itself.

HTML:

<ul id="test">
  <li class="item">
  A
  </li>
  <li class="item">
  B
  </li>
  <li class="item">
  C
  </li>
  <li class="item">
  D
  </li>  
  <li class="item">
  E
  </li>
</ul>

CSS:

#test {
  list-style:none;
  width:100%;
}
.item {
  width:33%;
  float:left;
  background-color: #444
}

在此处拨弄

推荐答案

使用Flexbox可以做到这一点，但是在这种情况下，您需要在flex-container元素或 ul 上设置固定高度.然后，您可以使用 flex-direction:column 和 flex-wrap:wrap 使达到最大高度时，项目中断到新列.

It is possible to do this with Flexbox but you need to set fixed height on flex-container element or ul in this case. Then you can use flex-direction: column and flex-wrap: wrap to make items break to new column when maximum height is reached.

此外，如果要使用边距，则需要使用 calc()

Also if you want to use margins you need to include them in in height using calc()

#test {
  list-style: none;
  display: flex;
  flex-direction: column;
  height: 300px;
  flex-wrap: wrap;
  padding: 0;
}
.item {
  background: #CF509D;
  margin: 10px;
}
.item:first-child {
  flex: 0 0 calc(100% - 20px);
  margin-left: 0;
  width: 50%;
}
.item:not(:first-child) {
  flex: 0 0 calc(50% - 20px);
  width: calc(25% - 20px);
}

<ul id="test">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="item">E</li>
</ul>

这是使用网格布局

#test {
  display: grid;
  min-height: 300px;
  grid-template-columns: 50% 1fr 1fr;
  list-style: none;
  padding: 0;
}
.item {
  background: #D04E98;
  margin: 10px;
}
.item:first-child {
  grid-row: 1 / 3;
}

<ul id="test">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="item">E</li>
</ul>

这篇关于使用CSS的1x 2x2尺寸大盒子旁边的2x2盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！