基本HTML：将图像放置在距离彼此相同的一行中 [英] Basic HTML: place images in one row with same distance from each other

问题描述

我的目标是将3张图像以相同的距离排列在一行中，如下图所示（假设2个箭头的长度相同）。

<现在我的解决方案是一个非常丑陋的解决方案，如果窗口太小，它会中断：

 < 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知识太有限了。
任何帮助，将不胜感激。

解决方案

使用 text-align：justify ：

 < 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;在大多数浏览器中， 
 
 
 
 
 
 $ b 
您可以删除 .fix  span，并添加 / a>： 
 
 
  .outer :: after {
 width：100％; 
 height：0; 
 display：inline-block; 
 content：; 
} 
  
 
My aim is to place 3 images in one row with the same distance from each other, as it is shown in the picture below (assuming the 2 arrows have the same length).



By now my solution is a very ugly one, which breaks, if the window size is too small:
<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>
I would really prefer a "clean" solution, but my HTML knowledge about positioning is too limited so far.
Any help would be appreciated.
解决方案
Use text-align: justify:
<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;
}




In most browsers, you can remove that .fix span, and add:
.outer::after {
    width: 100%;
    height: 0;
    display: inline-block;
    content: "";
}


                        
这篇关于基本HTML：将图像放置在距离彼此相同的一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！