html - 无论内容如何，都可以均匀对齐浮动的文章标签 - 没有 CSS 网格
问题描述
我最初想在网格中执行此操作，但由于某些原因，我不得不求助于浮动的可能性......
<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>（您需要扩展为“全宽”才能看到结果）但是无论图像中有多少内容，图像都应该始终对齐。
就像很多类似的问题所说的那样，我尝试了 inline-block 和 vertical-align middle 。我也做了表格和表格单元（如附件），但它没有用。
文章标签的行为是否不同？他们是否忽略了这些规则或其他什么？
我不能有任何暗示...
解决方案
你必须使用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>推荐阅读
- shell - Shell 脚本 IP 邻居刷新
- python - 如何在熊猫数据框中删除具有多个条件的行
- react-native - 如何在 BottomTabNavigator 中预渲染选项卡？
- macos - 如何选择适用的公证规则
- java - java.lang.NoSuchMethodError 因为 Tomcat 的 lib 文件夹中有重复的类
- python - 如何通过 Python 在 Bitrix24 上设置任务的截止日期？
- graphql - apollo-server 如何在 koa/express 中间件中访问数据源
- javascript - Display value in dropdown based on first dropdown
- xaml - 如何从 Xamarin Forms 中的另一个颜色静态资源设置 XAML 中颜色静态资源的值？
- csv - Google 应用脚本错误无法解析文本