我正在使用 Bootstrap ,因此在笔记本电脑和台式机 div 中工作正常,例如:
但在 Ipad 或手机中,它变成了这样:
HTML代码:
<div class="thumbnail_container">
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>First Div Test</h3>
<p>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>Second Div Test</h3>
<p>
</p>
</div>
</div>
</div>
</div>
这是管理 div 显示的 CSS 代码:
.thumbnail_container .thumbnail
{
border-color: white;
color: black;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
border-color: lightseagreen;
}
.thumbnail_container
{
text-align: center;
margin-top: 30px;
}
.thumbnail span
{
left:0; right:0;
margin: auto;
}
.caption > p
{
color: black;
width: 100%;
margin-top: 0px;
text-align: justify;
}
如何使所有屏幕分辨率下的所有 div 高度相同?
最佳答案
将 class="thumbnail_container"
更改为 class="thumbnail_container equal"
然后复制下面的代码并粘贴
/*make thumbnail div height equal */
@media screen and (min-width: 768px)
{
.equal, .equal > div[class*='col-']
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
}
关于css - 小分辨率下的 Div 高度不一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35545726/