如何在html/css中修复图片之间的大空格？
如何在html/css中修复图片之间的大空格？
提问于 2021-06-15 14:50:09
我正在尝试做一个投资组合，但我似乎无法摆脱之间的空间我的标志图像。这些图像非常分散，我似乎找不到如何在每个图像之间填充5px来压缩我的图像的方法
<html>
<head>
<title>Welcome to my portfolio! </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<script>
.logos {
position: absolute;
top: 40%;
display: flex;}
.img-container {
float:left;
width: 35%;}
</script>
</head>
<body>
<p>Find me on my socials!</p></p></div>
<div class="logos">
<div class="img-container">
<img src="facebook logo.png" width="100%">
</div>
<div class="img-container">
<img src="instagram logo.png" width="100%">
</div>
<div class="img-container">
<img src="linkedin logo.png" width="100%">
</div>
</div>
</div>
</body>
</html>我不确定这是不是因为我保存图像的方式，但这是在photoshop 1上完成的：https://i.stack.imgur.com/FtVLC.png
回答 3
Stack Overflow用户
发布于 2021-06-15 15:12:12
我已经修复了你代码中的错误。您的代码片段中有一些HTML代码问题&当父级为flex时，也不需要执行float:left。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" />
<style>
.logos {
position: absolute;
top: 40%;
display: flex;
}
.img-container {
width: 35%;
}
</style>
</head>
<body>
<p>Find me on my socials!</p>
</p>
<div class="logos">
<div class="img-container">
<img src="https://via.placeholder.com/150">
</div>
<div class="img-container">
<img src="https://via.placeholder.com/150">
</div>
<div class="img-container">
<img src="https://via.placeholder.com/150">
</div>
</div>
</body>
</html>https://codesandbox.io/s/big-white-spaces-67981326-8wdoj?file=/index.html
如果您需要进一步的支持，请告诉我。
Stack Overflow用户
发布于 2021-06-15 15:25:21
请尝试这些代码行。
<html>
<head>
<title>Welcome to my portfolio! </title>
<style>
.logos {
position: absolute;
top: 40 % ;
display: flex;
}
.img-container {
flex-direction: row;
margin-right: 20px;
}
</style>
</head>
<body>
<p>Find me on my socials!</p>
<div class="logos">
<div class="img-container">
<img src="https://via.placeholder.com/50" width="100%">
</div>
<div class="img-container">
<img src="https://via.placeholder.com/50" width="100%">
</div>
<div class="img-container">
<img src="https://via.placeholder.com/50" width="100%">
</div>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2021-06-15 15:25:28
请找到下面的代码片段。如果您删除此代码段中指定给.img-container的填充，徽标之间将不会有任何空格。您可以更新所需的空间。
目前我已经给我的图像100%的宽度，你可以改变它，也可以给一个静态的宽度。
.logos {
position: absolute;
display: flex;
}
.img-container {
flex: 1;
padding: 0 20px;
}
.img-container img {
max-width: 100%;
}<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<p>Find me on my socials!</p></p></div>
<div class="logos">
<div class="img-container">
<img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/facebook-512.png" width="100%">
</div>
<div class="img-container">
<img src="https://www.edigitalagency.com.au/wp-content/uploads/instagram-logo-svg-vector-for-print.svg" width="100%">
</div>
<div class="img-container">
<img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-linkedin-circle-512.png" width="100%">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67981326
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号