我本来想在网格中这样做的，但是由于种种原因，我不得不求助于浮动的可能性...
<article>标签与浮动标签的工作方式不同吗？我有4个块需要彼此对齐，而不管其中的内容/标题长度如何。
明白我的意思
.blog-side {
padding: 1.5em 0 1.5em;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
display: table;
}
article[class*="post-"] {
margin: 0em 1em 1em 0em;
display: table-cell;
}
.blog-side article {
width: 48%;
float: left;
}
.blog-side article:nth-child(even) {
width: 48%;
float: right;
}
img {
height: auto;
max-width: 100%;
}<section id="wrapper">
<section class="blog-side blog-side--2col">
<article id="post-111" class="post-111 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-fun-quizzes tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/sed-mollitia-tenetur-dolor/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Sed mollitia tenetur dolor" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
<span class="cat-links"><a href="http://10.241.11.85/blog/tag/most-popular">most popular</a></span>
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/sed-mollitia-tenetur-dolor/" rel="bookmark">Sed mollitia tenetur dolor</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/author2">Author</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/sed-mollitia-tenetur-dolor/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T23:21:34+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:28:27+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
<article id="post-166" class="post-166 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-fun-quizzes tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/qui-voluptatem-voluptatem-quis/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Qui voluptatem voluptatem quis" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
<span class="cat-links"><a href="http://10.241.11.85/blog/tag/most-popular">most popular</a></span>
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/qui-voluptatem-voluptatem-quis/" rel="bookmark">io huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrf</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/author2">Author</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/qui-voluptatem-voluptatem-quis/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T22:54:11+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:28:27+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
<article id="post-128" class="post-128 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/dolores-beatae-nemo-ut-voluptate-eos/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Dolores beatae nemo ut voluptate eos" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
<span class="cat-links"><a href="http://10.241.11.85/blog/tag/most-popular">most popular</a></span>
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/dolores-beatae-nemo-ut-voluptate-eos/" rel="bookmark">io huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrf</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/Author 1/">Author 1</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/dolores-beatae-nemo-ut-voluptate-eos/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T21:48:13+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:28:28+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
<article id="post-134" class="post-134 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-fun-quizzes tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/provident-enim-necessitatibus-excepturi-voluptatum-distinctio/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Provident enim necessitatibus excepturi voluptatum distinctio" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/provident-enim-necessitatibus-excepturi-voluptatum-distinctio/" rel="bookmark">Provident enim necessitatibus excepturi voluptatum distinctio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrf</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/author2">Author</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/provident-enim-necessitatibus-excepturi-voluptatum-distinctio/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T21:05:30+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:29:00+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
</section>
</section>
（您需要扩展到“全宽”以查看结果），但是无论其中有多少内容，图像都应该始终对齐。
我尝试了内联代码块和垂直对齐的中间代码，就像许多类似的问题一样。我也做了表格和表格单元格（如附件），但是没有用。
商品标签的行为是否有所不同？他们会忽略这些规则还是什么？
我无能为力...
答案 0 :(得分：0)
您必须使用grid。我删除了子<section>，并添加了两行CSS代码。
.blog-side {
padding: 1.5em 0 1.5em;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
display: table;
}
article[class*="post-"] {
margin: 0em 1em 1em 0em;
display: table-cell;
}
.blog-side article {
width: 48%;
float: left;
}
.blog-side article:nth-child(even) {
width: 48%;
float: right;
}
img {
height: auto;
max-width: 100%;
}
/* i added following code only */
section {
display:grid;
grid-template-columns:1fr 1fr;
}<!-- i deleted child <section> -->
<section id="wrapper">
<article id="post-111" class="post-111 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-fun-quizzes tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/sed-mollitia-tenetur-dolor/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Sed mollitia tenetur dolor" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
<span class="cat-links"><a href="http://10.241.11.85/blog/tag/most-popular">most popular</a></span>
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/sed-mollitia-tenetur-dolor/" rel="bookmark">Sed mollitia tenetur dolor</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/author2">Author</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/sed-mollitia-tenetur-dolor/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T23:21:34+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:28:27+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
<article id="post-166" class="post-166 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-fun-quizzes tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/qui-voluptatem-voluptatem-quis/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Qui voluptatem voluptatem quis" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
<span class="cat-links"><a href="http://10.241.11.85/blog/tag/most-popular">most popular</a></span>
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/qui-voluptatem-voluptatem-quis/" rel="bookmark">io huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrf</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/author2">Author</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/qui-voluptatem-voluptatem-quis/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T22:54:11+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:28:27+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
<article id="post-128" class="post-128 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/dolores-beatae-nemo-ut-voluptate-eos/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Dolores beatae nemo ut voluptate eos" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
<span class="cat-links"><a href="http://10.241.11.85/blog/tag/most-popular">most popular</a></span>
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/dolores-beatae-nemo-ut-voluptate-eos/" rel="bookmark">io huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrfio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrf</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/Author 1/">Author 1</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/dolores-beatae-nemo-ut-voluptate-eos/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T21:48:13+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:28:28+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
<article id="post-134" class="post-134 post type-post status-publish format-standard has-post-thumbnail hentry category-book-stuff category-uncategorized tag-fun-quizzes tag-most-popular">
<a href="http://10.241.11.85/blog/2018/11/27/provident-enim-necessitatibus-excepturi-voluptatum-distinctio/" class="post-thumbnail"><img class="landscape cw-lesser thumbnail full attachment-post-thumbnail size-post-thumbnail wp-post-image" width="701" height="394" alt="Provident enim necessitatibus excepturi voluptatum distinctio" itemprop="image" src="https://via.placeholder.com/300x300"></a>
<div class="entry-tag">
</div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://10.241.11.85/blog/2018/11/27/provident-enim-necessitatibus-excepturi-voluptatum-distinctio/" rel="bookmark">Provident enim necessitatibus excepturi voluptatum distinctio huhuhuhuh dggeycgeydgyegdyeg deftdfwyjdtdxfbtyxfbetwyfdx xndtewfbdtewfd bxfeutwbfyt3fntcrf</a></h2> <div class="entry-meta">
<span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://10.241.11.85/blog/author/author2">Author</a></span></span><span class="posted-on"> <a href="http://10.241.11.85/blog/2018/11/27/provident-enim-necessitatibus-excepturi-voluptatum-distinctio/" rel="bookmark"><time class="entry-date published" datetime="2018-11-27T21:05:30+00:00">November 27, 2018</time><time class="updated" datetime="2019-01-03T18:29:00+00:00">January 3, 2019</time></a></span> </div>
</header>
</article>
</section>