简而言之,我希望有一个响应式网格系统,而不使用行来保持它们尽可能动态.我得到的最好的方法就是这个:
* { box-sizing: border-box; }
.wrapper {
font-size: 0;
border: 1px solid blue;
}
.item {
font-size: 16px;
vertical-align: top;
width: 25%;
border: 2px dashed #F44336;
display: inline-block;
padding: 20px;
}
.item.c1-2 { width: 50%; }
.item.c2-3 { width: 66.66%; }
.item.c1-3 { width: 33.33%; }
<div class="wrapper">
<div class="item">One Line.</div>
<div class="item">Two<br>Lines.</div>
<div class="item">Three<br>Lines<br>Here.</div>
<div class="item">Four<br>Lines.<br><br>Yes, Really.</div>
<div class="item c2-3">Big Line.</div>
<div class="item c1-3">Small Line.</div>
<div class="item c1-2">Equal Line.</div>
<div class="item c1-2">Equal Line.</div>
</div>
我想念的是,当它们在一行中时,我不能使它们的高度相等,让它们看起来像这样:
现在我正在寻找一种解决方案,使它们的高度相等而不使用项目的行. Flexbox解决方案是受欢迎的,因为我不必支持旧浏览器; JS解决方案也没问题.
最佳答案 像这样?
我添加了这些CSS选项:
display: flex;
flex-wrap: wrap;
display: inline-flex;
* { box-sizing: border-box; }
.wrapper {
font-size: 0;
border: 1px solid blue;
display: flex;
flex-wrap: wrap;
}
.item {
font-size: 16px;
vertical-align: top;
width: 25%;
border: 2px dashed #F44336;
display: inline-flex;;
padding: 20px;
}
.item.c1-2 { width: 50%; }
.item.c2-3 { width: 66.66%; }
.item.c1-3 { width: 33.33%; }
<div class="wrapper">
<div class="item">One Line.</div>
<div class="item">Two<br>Lines.</div>
<div class="item">Three<br>Lines<br>Here.</div>
<div class="item">Four<br>Lines.<br><br>Yes, Really.</div>
<div class="item c2-3">Big Line.</div>
<div class="item c1-3">Small Line.</div>
<div class="item c1-2">Equal Line.</div>
<div class="item c1-2">Equal Line.</div>
</div>