<main>
<a href="blogslist.html">
<h2 class="section-heading">All Blogs</h2>
</a>
<section>
<div class="card">
<div class="card-image">
<a href="blogpost.html">
<img src="img/1.png" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="blogpost.html">
<h3>The Blog Title Here</h3>
</a>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis ipsa delectus maxime saepe dolorum odio, commodi tempora architecto eius ut repellat! Praesentium, officiis magnam sit tenetur expedita ullam sunt quibusdam.
</p>
<a href="blogpost.html" class="btn-readmore">Read more</a>
<p></p>
</div>
</div>
<div class="card">
<div class="card-image">
<a href="#">
<img src="img/2.png" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="#">
<h3>The Blog Title Here</h3>
</a>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem veritatis molestias sequi necessitatibus natus. Tempore, recusandae repellendus alias libero suscipit dolore aperiam doloribus voluptatum necessitatibus quod soluta quo modi dolorum!
</p>
<a href="#" class="btn-readmore">Read more</a>
</div>
</div>
</section>
<h2 class="section-heading">All Projects</h2>
<section>
<div class="card">
<div class="card-image">
<a href="#">
<img src="img/3.png" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="#">
<h3>The Projects Title Here</h3>
</a>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo consequatur eveniet reiciendis, delectus unde debitis labore architecto voluptas qui et atque nulla obcaecati ratione maiores? Dolor dolores pariatur minus nam?
</p>
<a href="#" class="btn-readmore">Read more</a>
</div>
<p></p>
</div>
<div class="card">
<div class="card-image">
<a href="#">
<img src="img/3.png" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="#">
<h3>The Project Title Here</h3>
</a>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos iusto culpa quaerat dolor iste! Dolores earum dolorum, explicabo mollitia illo autem porro quae, necessitatibus eius dolore, dolorem natus iusto veritatis!
</p>
<a href="#" class="btn-readmore">Read more</a>
</div>
</div>
</section>
</main>
SO网友:Faye
首先，将标题移动到其部分中，使结构更像这样：
<main>
<section>
Heading Here
Cards Here
</section>
<section>
Heading Here
Cards Here
</section>
</main>
然后，您可以使用CSS以几种不同的方式来实现这一点。最简单的方法是向每个部分添加一个类，然后将第一个类向左浮动，右边距为1%，将第二个类向右浮动，左边距为1%，并为每个部分指定48%的宽度。这将确保它们始终是两列。
如果您使用的是更现代的技术，安装了autoprefixer（或熟悉css的编写兼容性），并且正在寻找响应性解决方案，我会使用flexbox。以下是我在SCSS中如何做到这一点。
.main {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
@media only screen and (min-width: 600px) {
flex-wrap: nowrap;
}
section {
width: calc(100% - 30px);
margin: 15px;
@media only screen and (min-width: 600px) {
width: calc(100% / 2 - 30px);
}
}
}
