logo标签列表

在列中显示网格元素

htmlcssflexboxcss-grid
3

我没有找到好的解决方案，所以向社区寻求帮助！

我有12个来自数据库的元素。

我想要将这些元素显示在3列中（就像有3页，每页4个元素），而不改变来自数据库的记录顺序。

为了响应式和简化最终代码，我不想为这3页新建容器。

我也不想设置容器的宽度。

以下是用于解释我的问题的代码：

body {
  width: 900px;
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.element {
    background-color: red;
    margin: 20px;
    height: 100px;
    width: 100px;
    color: white;
    font-size: 50px;
    line-height: 100px;
    text-align: center; 
}

.container.good .element {
  background-color: green;
}
<body>
  <h1>Elements from bdd</h1>
  <div class="container">
      <div class="element">1</div>
      <div class="element">2</div>
      <div class="element">3</div>
      <div class="element">4</div>
      <div class="element">5</div>
      <div class="element">6</div>
      <div class="element">7</div>
      <div class="element">8</div>
      <div class="element">9</div>
      <div class="element">10</div>
      <div class="element">11</div>
      <div class="element">12</div>
  </div>
  <h1>Expected 3 columns (with elements order above of course)</h1>
  <div class="container good">
      <div class="element">1</div>
      <div class="element">2</div>
      <div class="element">5</div>
      <div class="element">6</div>
      <div class="element">9</div>
      <div class="element">10</div>
      <div class="element">3</div>
      <div class="element">4</div>
      <div class="element">7</div>
      <div class="element">8</div>
      <div class="element">11</div>
      <div class="element">12</div>
  </div>
</body>

附加问题，是否有一种简单的方法来调整列和页面之间的边距

非常感谢您的帮助， Pedro

4个回答
0

你可以使用Bootstrap来创建元素的网格，这将使你的页面具有响应性。

Bootstrap网格系统：

<div class = "container">
       <div class = "row">

          *1 Grid With 4 Element*

           <div class = "col-md-4" >
             <div class="element">1</div>
             <div class="element">2</div>
             <div class="element">3</div>
             <div class="element">4</div>
           </div>

           *2 Grid With 4 Element*

           <div class = "col-md-4" >
             <div class="element">5</div>
             <div class="element">6</div>
             <div class="element">7</div>
             <div class="element">8</div>
           </div>

            *3 Grid With 4 Element*

           <div class = "col-md-4" >
             <div class="element">9</div>
             <div class="element">10</div>
             <div class="element">11</div>
             <div class="element">12</div>
           </div>

       </div>
</div>
谢谢您的快速回答。我确切地不想使用列容器，并且我想保持网站简单，而不使用Bootstrap。 还有更多本地化的想法吗？ - Pedro
0

将此添加到您的样式中：

   .container.good {
       display: grid;
       grid-template-columns: repeat(3, auto);
       width: fit-content; 
   }

我已经添加了 width: fit-content，以便将元素更紧密地放在一起，但听起来您需要根据自己的设置进行调整，因为您有一些限制。

0

我认为在flexbox中创建列的方法没有不使用额外容器的方式。必须使用额外容器来创建类似网格的结构。

此外，如果您只是使用网格，则事情不会变得太混乱。

虽然如果您不想指定宽度并添加容器，则可能有一种解决方法。如果您需要，假设有n列，则在每个nth子元素之后添加一个空的分区，并使该分区占用其余空间。

.Spacing {
  width: 100%;
}

我在空的分区中添加了Spacing类。 width: 100%;将使该分区水平占据剩余空间，并强制旁边的元素从底部开始。

更进一步解释，如果您的屏幕宽度为100px，并且4个正方形需要60px，则空的分区将获得剩余的宽度，即40px。

body {
  width: 900px;
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.element {
    background-color: red;
    margin: 20px;
    height: 100px;
    width: 100px;
    color: white;
    font-size: 50px;
    line-height: 100px;
    text-align: center; 
}

.Spacing {
  width: 100%;
}

.container.good .element {
  background-color: green;
}
<body>
  <h1>Elements from bdd</h1>
  <div class="container">
      <div class="element">1</div>
      <div class="element">2</div>
      <div class="element">3</div>
      <div class="element">4</div>
      <div class="Spacing"></div>
      <div class="element">5</div>
      <div class="element">6</div>
      <div class="element">7</div>
      <div class="element">8</div>
      <div class="Spacing"></div>
      <div class="element">9</div>
      <div class="element">10</div>
      <div class="element">11</div>
      <div class="element">12</div>
  </div>
  <h1>Expected 3 columns (with elements order above of course)</h1>
  <div class="container good">
      <div class="element">1</div>
      <div class="element">2</div>
      <div class="element">5</div>
      <div class="element">6</div>
      <div class="element">9</div>
      <div class="element">10</div>
      <div class="element">3</div>
      <div class="element">4</div>
      <div class="element">7</div>
      <div class="element">8</div>
      <div class="element">11</div>
      <div class="element">12</div>
  </div>
</body>

再次强调，添加列之间的间距最好的方法是为每个列使用单独的容器。但如果您想按照当前的方式进行操作，我建议采用以下方法。如果您需要让列之间保持均匀的间距，比如说 20px，那么您应该在这些红色正方形的容器中添加 10px 的填充，并在这些红色正方形上添加 10px 的外边距。这将确保所有边缘和中间都有均匀的间距。

以下是一个示例：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#A {
  display: flex;
  background-color: #FF0000;
  margin-bottom: 20px;
}

#B {
  display: flex;
  background-color: #FF0000;
  padding: 10px;
}

.Element {
  width: 75px;
  height: 75px;
  background-color: #0D0D0D;
  margin: 10px;
}
<div id="A">
  <div class="Element"></div>
  <div class="Element"></div>
  <div class="Element"></div>
</div>
<div id="B">
  <div class="Element"></div>
  <div class="Element"></div>
  <div class="Element"></div>
</div>

比较第一个矩形和第二个矩形周围的边距。前者在元素外部没有相等的边距。但后者在任何地方都有相等的边距。

0

请问您能否检查一下以下代码？希望它对您有用。通过使用flex属性和高度，我们已经按照您的要求解决了这个问题，而不改变元素顺序。

请参考此链接： https://jsfiddle.net/yudizsolutions/Lgqkjrxy/1/

body {
  width: 900px;
}

.container {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-content: space-between;
  -webkit-align-content: space-between;
  height: 560px;
}

.element {
  background-color: red;
  margin: 20px;
  height: 100px;
  width: 100px;
  color: white;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
}

.container.good .element {
  background-color: green;
}
<body>
  <h1>Elements from bdd</h1>
  <div class="container">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
    <div class="element">7</div>
    <div class="element">8</div>
    <div class="element">9</div>
    <div class="element">10</div>
    <div class="element">11</div>
    <div class="element">12</div>
  </div>
</body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接