CSS列数和第一个元素的问题

Question

我用 CSS column-count 制作了这个砌体 CSS 布局：

.container-post{

column-gap: 20px;
margin: 0 auto;
column-count: 2;
}



.box-article {
display: inline-block;
background: #ffffff;
padding: 20px;
margin: 0 0 15px;
width: 100%;
box-sizing: border-box;
border: solid 1px gray;

}



.box-article img{
width: 100%;
}



.box-article a{
    color: #000000;
}

.box-article h2{
    color: #000000;
    text-align: center;
}

这里是 HTML：

<div class="container-post">   <!-- start container -->

    <!-- starting fetch article from MySQL database with PHP -->
  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

       <!-- end loop -->      
 </div>

嗯，它有效，但我希望第一个盒子像所有容器一样大。我只想制作第一篇有 1 列的文章（像其他帖子一样的图像和文本）和两列上的其他帖子（砖石风格）。我也试过 :first-type 和 :first-child，但没有结果。

有什么想法吗？ 谢谢！

Answer 1

要完成这项工作，您需要从规则 .box-article 中删除 display: inline-block; 并添加规则.container-post>:first-child { column-span: all }

应该可以的。

更正这在您只有 3 篇文章时有效。超过3篇文章唯一需要的代码是.container-post>:first-child { column-span: all; display: block }（添加display: block）

并且不要从规则 .box-article 中删除 display: inline-block;

我更正了代码并添加了几篇文章来证明这一点。

.container-post{

column-gap: 20px;
margin: 0 auto;
column-count: 2;
}

/* ADD */
.container-post>:first-child { column-span: all; display: block }

.box-article {
display: inline-block;
background: #ffffff;
padding: 20px;
margin: 0 0 15px;
width: 100%;
box-sizing: border-box;
border: solid 1px gray;
}
.box-article img{
width: 100%;
}
.box-article a{
    color: #000000;
}
.box-article h2{
    color: #000000;
    text-align: center;
}

<div class="container-post">   <!-- start container -->

    <!-- starting fetch article from MySQL database with PHP -->
  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

  <div class="box-article">
  <a href="#"><img src="image.jpg" style="width: 100%; height: 100%; object-fit:cover;" alt="image post" /></a>
  <a href="#"><h2>Post title</h2></a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, ratione, sit, eos, repudiandae corporis quos beatae placeat autem nesciunt id sapiente doloremque debitis ipsa laborum nulla officia explicabo rerum tempore?</div>
  <div><a href="#">Read more</a></div>
  </div>

       <!-- end loop -->      
 </div>