html - 如何将图像放在彼此旁边
问题描述
好吧,我对 CSS 有点陌生,我不明白我错在哪里。
所以我有这个HTML:
<body>
<div class="container">
<div class="inner">
<img src="/images/LogoWhite.jpg" alt="The Mosshelter Logo" class="logo">
<div class="left">
<div class="min1">
<img src="/images/1.jpg" alt="miniatura1">
</div>
<div class="min2">
<img src="/images/2.jpg" alt="miniatura2">
</div>
<div class="min3">
<img src="/images/3.jpg" alt="miniatura3">
</div>
</div>
<div class="right">
<div class="immaginedx">
<img src="/images/30707343_763979673809675_1848895112105426944_o.jpg" alt="immaginedx">
</div>
</div>
</div>
</div>
使用这个 CSS(我想让 3 张图像彼此相邻):
body {
margin: 0;
height: 100vh;
}
.container {
margin: 0 auto;
.logo {
width: 1000px;
align-self: center;
}
.left {
padding: 1em;
}
.min1 img,
.min2 img,
.min3 img {
width: 100px;
display: inline-block;
}
.right {
.immaginedx img {
display: none;
}
}
}
我在不同的 div 中有三个图像,它应该可以工作吗?
提前致谢!
解决方案
改变:
.left {
padding: 1em;
}
至:
.left {
display: flex;
flex-direction: row;
padding: 1em;
div {
width: 33%;
}
}
这将为它提供正确的布局属性,以并排显示子项,而不是彼此下方。
推荐阅读
- node.js - Nuxt js开发环境中CPU使用率高
- python - 在 Deap 中评估一批个体而不是一个一个的评估
- sas - 在 SAS 中使用集合导入数据时遇到问题
- javascript - 单击列表项时删除移动菜单
- python - 如何使用 Python 3 将 HTML 文档中的 {{var}} 替换为变量
- windows - 如何使用 cmake add_custom_target 将 .tar.gz 中的所有文件提取到特定文件夹?
- qgis - Qgis 3.12 - 缺少添加零件工具
- javascript - React Native Maps(Mapview Marker)不起作用
- python - 如何在 url_for 中嵌套 jinja 变量
- c# - IClaimsTransformation 和角色如何使用不在活动目录中的角色?