1

私の目的は、下の図に示すように、3つの画像を互いに同じ距離で1行に配置することです（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の知識は今のところあまりにも限られています。どんな助けでもいただければ幸いです。

4

1 に答える 1

2

使用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;
}

ほとんどのブラウザでは、そのスパンを削除して、次.fixを追加できます。

.outer::after {
    width: 100%;
    height: 0;
    display: inline-block;
    content: "";
}
于 2012-11-08T13:47:46.140 に答える