如何将所有图像排成一行？
如何将所有图像排成一行？
提问于 2022-03-19 19:56:48
如何使所有的图像一致？似乎什么都起不到作用..。
是关于照片大小的吗？没有正确地使用这些类？
.fac {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.col {
flex-basis: 31%;
border-radius: 10px;
margin-bottom: 5%;
text-align: center;
}
.col img {
width: 100%;
border-radius: 10px;
padding: 5px;
margin-right: -4px;
}
.col p {
padding: 0;
}
.col h3 {
margin-top: 16px;
margin-bottom: 15px;
text-align: left;
}
.col p {
padding: 0;
}
.col h3 {
margin-top: 16px;
margin-bottom: 15px;
text-align: left;
}<section class="fac">
<h1>Linia de productie sau ceva</h1>
<p>Yes, I guess?</p>
<div class="row">
<div class="col">
<img src="../photos/stc.jpg">
<h3>yuo gen roadmap</h3>
<p>ceva descriere</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="../photos/meatthemeat.jpg">
<h3>Bsalasaaa da</h3>
<p>dfasd</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="../photos/bbc.jpg">
<h3>aasdasa da</h3>
<p>adsfd</p>
</div>
</div>
</section>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-19 20:44:16
这是因为您为每个img使用了行，您可以编辑代码并为行标记设置标记，如下面的HTML：
<section class="fac">
<h1>Linia de productie sau ceva</h1>
<p>Yes, I guess?</p>
<div class="row">
<div class="col">
<img src="../photos/stc.jpg">
<h3>yuo gen roadmap</h3>
<p>ceva descriere</p>
</div>
<div class="col">
<img src="../photos/stc.jpg">
<h3>Bsalasaaa da</h3>
<p>dfasd</p>
</div>
<div class="col">
<img src="../photos/stc.jpg">
<h3>aasdasa da</h3>
<p>adsfd</p>
</div>
</div>
</section>CSS：
.row{
display : flex;
justify-content : space-between;
}Stack Overflow用户
发布于 2022-03-19 21:04:23
只要向display: flex;类添加一个.col，它就能工作了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71541586
复制相关文章
相似问题
腾讯云开发者
