在 2x2 矩阵中堆叠 div [重复]答案

【问题标题】：Stack divs in 2x2 matrix [duplicate]在 2x2 矩阵中堆叠 div [重复]
【发布时间】：2020-04-13 10:59:49
【问题描述】：

我有一个简单的 div，我需要在行和列中显示它们，例如

2x2
2x2

我的html

<div class="container">
  <div class="box"> <img src="../../assets/img/demo.jpg" > </div>
  <div class="box"> <img src="../../assets/img/demo.jpg" > </div>
  <div class="box"> <img src="../../assets/img/demo.jpg" > </div>
  <div class="box"> <img src="../../assets/img/demo.jpg" > </div>
</div>

预期结果

【问题讨论】：

需要更多信息，例如 CSS

标签： html css

【解决方案1】：

尝试将相同的行图片放在<div>标签中，并使用<a>标签将它们分隔到不同的列（用于执行某些行为，例如超链接<a href="https:......">）。

    <div class="container">
        <div class="box">  
            <a>
                <img src="../../assets/img/demo.jpg" >
            </a>
            <a>
                <img src="../../assets/img/demo.jpg" >
            </a>
        </div>
        <div class="box">  
            <a>
                <img src="../../assets/img/demo.jpg" >
            </a>
            <a>
                <img src="../../assets/img/demo.jpg" >
            </a>
        </div>
    </div>

【讨论】：

【解决方案2】：

应该这样做 - 基本上使用flexbox

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 0 50%;
  box-sizing:border-box;    
}

小提琴 - https://jsfiddle.net/spandzfiddle/v4shup17/

【讨论】：

【解决方案3】：

问题的答案可以是这样的，使用 flexbox ：

.container{
  display : flex;
  flex-direction: row;
  flex : 1;
  }
  .row{
    display : flex;
  flex-direction: column;
  }
  .box img{
  border : 2px solid black;
  border-radius : 10px;

<div class="container">
  <div class="row">
  <div class="box"> <img src="https://dummyimage.com/200x200/2bb8b8/fff.png&text=Dummy+Image" > </div>
  <div class="box"> <img src="https://dummyimage.com/200x200/2bb8b8/fff.png&text=Dummy+Image" > </div>
  </div>
    <div class="row">
  <div class="box"> <img src="https://dummyimage.com/200x200/2bb8b8/fff.png&text=Dummy+Image" > </div>
  <div class="box"> <img src="https://dummyimage.com/200x200/2bb8b8/fff.png&text=Dummy+Image" > </div>
  </div>
</div>

基本上代码的结构是这样的：

.container

  |- .row

    |-.box img

    |-.box img

  |-.row

    |-.box img

    |-.box img

其中我们将.container 的显示设置为flex 并且flex 方向为row，意味着所有的children 将被水平堆叠。然后我们还设置.row的显示为flex，flex方向为column，这样子元素会垂直堆叠。这样，我们就得到了您要求的 2x2 网格。

【讨论】：

谢谢，但如果我在一个 div 中有 4 个 div。意味着您将 2 个图像划分为一个 div。我不想分开
我正在划分，因为我不知道您可能拥有的确切尺寸。图像数量可变，因此潜水可能是最佳选择\

【解决方案4】：

使用 CSS 网格布局，您可以轻松设计图像网格，而无需使用浮动和定位。

样式

.wrapper {
    display: inline-grid;
    grid-gap: 10px;
}

html

<div class="grid">
        <div>   
            <img src="../../assets/img/demo.jpg" />
            <img src="../../assets/img/demo.jpg" />
        </div>
        <div>
            <img src="../../assets/img/demo.jpg" />
            <img src="../../assets/img/demo.jpg" />
        </div>
</div>

【讨论】：

【解决方案5】：

不知道为什么还没有人推荐使用 only 网格：

.container{
    display: grid;
    grid-template-columns: repeat(2, 80px);
    grid-gap: 6px 10px;
}

<div class="container">
  <div class="box"> <img src="http://placekitten.com/80/120" > </div>
  <div class="box"> <img src="http://placekitten.com/80/120" > </div>
  <div class="box"> <img src="http://placekitten.com/80/120" > </div>
  <div class="box"> <img src="http://placekitten.com/80/120" > </div>
</div>

【讨论】：