无论内容如何，均匀对齐浮动文章标签 - 没有 CSS 网格

Question

我原本想在网格中执行此操作，但由于某些原因，我不得不求助于浮点的可能性......

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

（您需要扩展到"全宽"才能看到结果），但无论图像中有多少内容，都应始终对齐。

我尝试了内联块和垂直对齐中间，就像很多类似的问题所说的那样。我也做了表格和表格单元格（如附件所示），但它不起作用。

文章标签的行为是否不同？他们是否忽略了这些规则或其他什么？

我不能有任何其他暗示...

Answer 1

您必须使用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>