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>

嗯，它可以工作，但是我希望第一个盒子像所有容器一样大。我只想撰写第一篇文章，其中第一栏（图片和文字类似其他文章），而其他文章在两栏上（砌体样式）。我也尝试过：first-type和：first-child，但没有结果。

有什么想法吗？谢谢！

Answer 1

要执行此操作，您需要从规则display: inline-block;中删除.box-article并添加规则.container-post>:first-child { column-span: all }

应该这样做。

Correction仅当您有3篇文章时才有效。对于3篇以上的文章，唯一需要的代码是.container-post>:first-child { column-span: all; display: block }（已添加display: block）

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

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

.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>