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

Question

我用 CSS 列数制作了这个砌体 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>

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

Problem with CSS column-count and first element

html

css

grid

layout

masonry