增减浏览器缩放时不同高度的“显示单元格”
增减浏览器缩放时不同高度的“显示单元格”
提问于 2019-09-30 17:09:57
总之，当我增加或减少浏览器的缩放时，我在显示使用div + css构建的表格时遇到了问题。带有图像的单元格(从高到行)在大小上增加或减少，我不明白为什么。图像是35x35px，单元格的顶部和底部都有10px的填充。以下是问题的屏幕截图和一些源代码。我真的不知道为什么这样的行为
编辑:其他信息，表在<iframe>元素中
.table-custom {
font-size: 12px;
display: table;
width: 100%;
}
.table-row {
display: table-row;
color: #333;
}
.col {
display: table-cell;
vertical-align: middle;
padding: 10px 3px;
border-bottom: 2px solid #666;
}
.col-1 {
width: 25%;
text-align: center;
font-weight: bold;
font-size: 15px;
}
.col-2 {
width: 15%;
}
.col-2 img{
width: 35px;
height: 35px;
}
.col-3 {
width: 60%;
} <div class="table-custom">
<div class="table-row clearfix">
<div class="col col-1">
<a href="...">sometxt</a>
</div>
<div class="col col-2">
<a href="..."> <img class="sua" src="https://i.imgur.com/wxROuzQ.png"> </a>
</div>
<div class="col col-3">
<a href="...">sometxt</a>
</div>
</div>
<div class="table-row clearfix">
<div class="col col-1">
<a href="...">sometxt</a>
</div>
<div class="col col-2">
<a href="..."> <img class="sua" src="https://i.imgur.com/wxROuzQ.png"> </a>
</div>
<div class="col col-3">
<a href="...">sometxt</a>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-09-30 17:25:53
如果您放大或缩小您的浏览器，它将增加或减少所有元素。但是当你调整你的浏览器窗口大小时，它不会这样做。一切都保持不变。如果宽度和高度的单位是百分比，它将被调整为屏幕的宽度和高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58164715
复制相关文章
相似问题
腾讯云开发者
