我认为这个问题很常见,并且在SO本身就已经找到了,但是找不到如何解决这个问题.
问题:
当您调整窗口大小时,您会注意到两个图像的高度有时会相差1px(当浏览器调整尺寸时,这是预期的).
如何“修复”此UI问题?我知道我可以通过使用flexbox来做到这一点.但我想有一个更好的解决方案.你们可以跳进去吗?
table{
width:100%;
border-collapse: collapse;
}
img{
display: block;
width: 100%;
}
甚至在这里我使用display:table:
.wrapper{
width:100%;
display: table;
}
.wrapper div{
display: table-cell;
}
img{
display: block;
width: 100%;
}
编辑:
Firefox浏览器中没有此问题,但Chrome中存在此问题.
请注意,当我使用flexbox时,问题不存在:
body{
margin: 0;
}
.wrapper{
width:100%;
display: flex;
}
.wrapper div{
flex: 1;
}
img{
display: block;
width: 100%;
}
或使用浮点数和内联块:
body{
margin: 0;
}
.wrapper{
width:100%;
display: block;
}
.wrapper div{
display: inline-block;
float: left;
width:50%;
}
.wrapper:after{
content: '';
display: inline-block;
clear:both;
}
img{
display: block;
width: 100%;
}