0

4 つの画像を水平方向に均等に並べて配置する必要があります。これはここで何度も尋ねられていることを認識していますが、私が見つけた解決策はどれもうまくいきませんでした. それらはすべて、行の固定幅または画像の固定幅のいずれかに依存しているようです。両方をパーセンテージで指定する必要があります。

私のHTML：

<div id="tabBar">

                <div id="PDiv">
                    <img id="Person" src="images/icons/tabBar/image0.png">
                </div>
                <div id="SDiv">
                    <img id="Sale" src="images/icons/tabBar/image1.png">
                </div>
                <div id="CtDiv">
                    <img id="Current" src="images/icons/tabBar/image2.png">
                </div>
                <div id="FDiv">
                    <img id="Food" src="images/icons/tabBar/image3.png">
                </div>
                <span id="Stretch"></span>
            </div>

CSS

#tabBar
{
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F3F3F3;
    width: 100%;
    text-align: justify;

}
#PDiv, #SDiv, #CDiv, #FDiv
{
    background-color: #F3F3F3;
    width: 24%;
    vertical-align: top;
    height: auto;
    display: inline-block;
}
#Stretch
{
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

この方法の問題は、モバイル ハイブリッド アプリを作成していることです。したがって、多くの画面サイズで動作する必要があります。現在、大きな画面やコンピューターでは見栄えがしますが、小さな画面の電話では、画像が途切れたり、画像の 1 つが消えて新しい行ができたりします。代わりに、画像を縮小して等間隔に配置する必要があります。

4

2 に答える 2

2

次のように、CSS を使用して画像をスケーリングしようとしましたか。

img {
  width: 100%;
  height: auto;
}

これにより、新しい行を作成したり、途切れたりするイメージを防ぐことができます。

編集：

jsfiddle リンク: http://jsfiddle.net/ATube/

于 2013-08-24T17:37:52.970 に答える
1

CSS クラスに不一致があります (#CtDiv と #CDiv)。これにより、CDiv がブロック要素として残ります。

私が提案するかもしれませんが...「ストレッチ」全体は不要であり、24％は丸め誤差に陥ります。次のようなものをお勧めします。

HTML

<div id="tabBar">
   <div id="PDiv"></div>
   <div id="SDiv"></div>
   <div id="CDiv"></div>
   <div id="FDiv"></div>
</div>

CSS

#tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F3F3F3;
    width: 100%;
    height:40px;
}
#PDiv, #SDiv, #CDiv, #FDiv {
    background-color:#F3F3F3;
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center center;
    width: 25%;
    vertical-align: top;
    display: inline-block;
    float:left;
    height:100%;
}
#PDiv {
    background-image:url(images/icons/tabBar/image0.png);
}
#SDiv {
    background-image:url(images/icons/tabBar/image1.png);
}
#CDiv {
    background-image:url(images/icons/tabBar/image2.png);
}
#FDiv {
    background-image:url(images/icons/tabBar/image3.png);
}

一般に、これは多少軽量になるはずですが、さらに重要なことは... スタイルと構造をより適切に分離できるようにすることです。

あなたをフィドルにしました： http://jsfiddle.net/F6khC/

于 2013-08-24T17:55:33.687 に答える