gpt4 book ai didi

html - 如何在缩略图之间添加空间而不让最后一个缩略图转到下一行?

转载 作者:太空宇宙 更新时间:2023-11-04 11:15:17 24 4
gpt4 key购买 nike

我有一个使用 Bootstrap 的基本缩略图显示。我想连续显示 3 张图像,并在缩小页面时减少到 2 张图像。我已经解决了这个问题,直到我添加了一个 margin-right 以在缩略图之间添加一些空间。一旦我这样做了,它就会把第三张图片推到下一行。我试着调整填充和边距,但我无法让第三个缩略图保持在同一条线上。我也尝试将其更改为 col-sm-3,但似乎也没有用。

HTML:

<div class="work">
<ul>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
</ul>
</div>

CSS:

.work {
padding: 0px 40px 0px 0px;
max-width: 100%;
}

.thumbnail {
margin-right: 10px;
}

最佳答案

如果这就是你的意思,我不是 100%,但就是这样:

HTML

<div class="work">
<ul>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
</ul>
</div>

CSS

.thumbnail {
border:0;
}
.thumbnail a{
display:block;
padding:10px;
background:red;
}
.thumbnail img{
width:100%;
}

https://jsfiddle.net/ax7wcLo4/2

关于html - 如何在缩略图之间添加空间而不让最后一个缩略图转到下一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33288767/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com