[如果有人对这个问题的措词有更好的表达,请编辑,我在寻找答案时都在努力寻找什至。
我有一排四列,每列都有标题和描述。长度是动态的,我想将所有长度对齐到中间。但是,我希望所有内容都均匀对齐-因此标题排成一行,描述排成一行。我正在使用Bootstrap。
但是,我找不到任何简单的方法来解决此问题。我有点用绝对位置来解决这个问题,但是它导致孩子们超出了他们的父母,这会带来一些问题。
HTML
<!-- lots of these -->
<article>
<h3>Dynamic title</h3>
<p>description</p>
<div class="hidden">
<h3>Dynamic Title</h3>
<p>description</p>
</div>
</article>
CSS
article { position:relative; padding-top:30px; display:flex; }
.hidden { opacity:0; visibility:hidden; }
article > h3 { position:absolute; bottom:50%; padding-top:inherit; padding-right:inherit; }
article > p { position:absolute; top:50%; padding-right:inherit; }
但是,如果您查看此fiddle,则无法控制每行之间的间距。绝对位置将元素拉出其位置。它使该解决方案显得不那么理想。
是否有更好的方法可以做到这一点?如果需要(或作为调整),我不介意使用JS。
如果您选择自定义而不是引导程序(因为您没有提到您使用的是哪个版本的引导程序。)。>
HTML会这样。
<div class="article">
<div class="box">
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
</div>
<div class="box">
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
</div>
<div class="box">
<h1>Lorem Ipsum is simply dummy text of the printing and</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
</div>
</div>
CSS会这样
.article {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1140px;
margin-left: auto;
margin-right: auto; }
.article .box {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
max-width: 33.333%;
padding-left: 15px;
padding-right: 15px; }
@media (max-width: 767px) {
.article .box {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%; } }
.article .box h1 {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-moz-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
border: 1px solid green;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%; }
这里是Demo
如果使用Bootstrap4。Example
希望获得帮助。