CSS column-count布局疑问：如何让首个元素占满容器整宽度

Got it, let's get this sorted! The issue you're facing is that column-span: all (the property that lets an element span all columns) doesn't play nicely with inline-block by default. Here's how to fix it step by step:

Working CSS Adjustment #

Update your existing CSS to add a rule for the first .box-article element:

.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; }
/* Add this rule to target the first article */
.box-article:first-child {
  column-span: all;
  display: block; /* Switch to block-level to enable column-span */
}
.box-article img{ width: 100%; }
.box-article a{ color: #000000; }
.box-article h2{ color: #000000; text-align: center; }

Why This Works #

• column-span: all tells the first article to stretch across all columns in the container (which is set to 2 columns, so it takes full width).
• We switch the first element to display: block because column-span only works on block-level elements—your original inline-block was preventing the property from taking effect, which is probably why your earlier attempts with :first-child failed.

What It Does #

• The first .box-article will now take up the full width of the .container-post
• All subsequent articles will continue to flow into the 2-column masonry layout as before
• The styling (padding, border, text alignment) for the first article stays consistent with the others, just like you wanted

Compatibility Note #

column-span is supported in all modern browsers (Chrome, Firefox, Safari, Edge). If you need to support very old browsers like IE11 or earlier, this property won't work—for those cases, you could move the first article outside the .container-post and style it separately, but that's less clean than this solution.

Your existing HTML doesn't need any changes—keep it exactly as is!

内容的提问来源于stack exchange，提问作者goofy5489