如何解决垂直砌体布局,三个图像并排
我有以下html代码:
<style>
img {
width:33.3333333%;
float:left;
}
</style>
<img src="https://via.placeholder.com/500/FF0000?text=1">
<img src="https://via.placeholder.com/500x700/0000FF?text=2">
<img src="https://via.placeholder.com/500x600/008000?text=3">
<div style="clear:left;"></div>
<img src="https://via.placeholder.com/500/FFFF00?text=4">
<img src="https://via.placeholder.com/500/808000?text=5">
<img src="https://via.placeholder.com/500/00FFFF?text=6">
<div style="clear:left;"></div>
如您所见,image 1
和image 4
之间以及image 3
和image 6
之间都有一个空格。
我想通过将每个图像向上推至上方图像,而又不剪切图像高度来达到彼此下方图像之间没有空间的目的。
我该怎么做?
解决方法
我最终得到了运行良好的代码:
<style>
.container {
width:33.3333333%;
float:left;
}
img {
width:100%;
}
.middle {
margin-left:6px;
margin-right:6px;
}
</style>
<div class="container">
<img src="https://via.placeholder.com/500/FF0000?text=1">
<img src="https://via.placeholder.com/500/FFFF00?text=4">
</div>
<div class="container" class="middle">
<img src="https://via.placeholder.com/500x700/0000FF?text=2">
<img src="https://via.placeholder.com/500/808000?text=5">
</div>
<div class="container">
<img src="https://via.placeholder.com/500x600/008000?text=3">
<img src="https://via.placeholder.com/500/00FFFF?text=6">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。