Css 基本HTML:将图像放置在一行中,彼此之间的距离相同
我的目标是将3个图像放置在一行中,彼此之间的距离相同,如下图所示(假设两个箭头的长度相同) 到目前为止,我的解决方案是一个非常丑陋的解决方案,如果窗口大小太小,它就会崩溃:Css 基本HTML:将图像放置在一行中,彼此之间的距离相同,css,html,positioning,Css,Html,Positioning,我的目标是将3个图像放置在一行中,彼此之间的距离相同,如下图所示(假设两个箭头的长度相同) 到目前为止,我的解决方案是一个非常丑陋的解决方案,如果窗口大小太小,它就会崩溃: <h1> <div style="width:105px; height:30px; float:left; margin-top:25px;"> <img src="image1.png"/> </div> <div style
<h1>
<div style="width:105px; height:30px; float:left; margin-top:25px;">
<img src="image1.png"/>
</div>
<div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
<img src="image2.png"/>
</div>
<div style="width:102px; height:30px; float:right; margin-top:25px;">
<img src="image3.png"/>
</div>
<div style="clear: both;">
</div>
</h1>
我真的更喜欢一个“干净”的解决方案,但到目前为止,我对定位的HTML知识太有限了。
任何帮助都将不胜感激。:
在大多数浏览器中:
您可以尝试使用边距将div居中:0自动;H1的宽度是固定的吗?@Šime Vidas H1的宽度不是直接固定的,但我想我从某个父元素继承了一些固定的宽度。@KB但是如果窗口太小,你会说“它断了”。如果H1是固定的,它将始终具有相同的宽度,并且不会中断。@KB无论如何,您可以通过显式指定H1上的宽度来防止中断。因此,您可以确定不中断所需的宽度,并在H1上设置该宽度。
<div class="outer">
<img src="http://placehold.it/50x100" />
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/50x100" />
<span class="fix"></span>
</div>
.outer {
text-align: justify;
}
.outer img {
display: inline-block;
vertical-align: center;
}
.outer .fix {
width: 100%;
height: 0;
display: inline-block;
}
.outer::after {
width: 100%;
height: 0;
display: inline-block;
content: "";
}