Question

我无法弄清楚如何在2列上调整内容，以便正确显示。我希望两列上的内容（后面将是几张图片，6 +），以每列为中心。

我尝试使用上面的代码，但我正在寻找更适合我案例的内容。

.portfolio-column {
  column-count: 2;
  column-gap: 40px;
  column-width: 100px;
}

.box1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.box2 {
  width: 300px;
  height: 100px;
  border: 1px solid red;
}

<div class="fixed-bg3" id="portfolio">
  <a href=""></a>
  <p class="portfolio">Portfolio</p>
  <div class="portfolio-column">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>

Answer 1

如果您使用column-count，则无需使用内部div将其作为列。
请务必将图像显示为block并使用margin:auto;轻松将其水平居中。

＆＃13;

.portfolio-box {
  position: relative;
  column-count: 2;
}
.portfolio-box img{
  display:block;
  margin:auto;
}

＆＃13;

<div class="fixed-bg3" id="portfolio">
  <a href=""></a>
  <p class="portfolio">Portfolio</p>
  <div class="portfolio-box">
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
  </div>
</div>

＆＃13;

这样，唯一要修改的属性是CSS中的column-count来修改显示。

＆＃13;

.portfolio-box {
  position: relative;
  column-count: 3;
}
.portfolio-box img{
  display:block;
  margin:auto;
}

＆＃13;

<div class="fixed-bg3" id="portfolio">
  <a href=""></a>
  <p class="portfolio">Portfolio</p>
  <div class="portfolio-box">
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
      <img src="https://i.stack.imgur.com/WgFrB.png" />
  </div>
</div>

＆＃13;

无法弄清楚如何在2列

1 个答案: