1

3 つの柔軟な画像を水平に並べて、柔軟な背景を持つ柔軟な div コンテナーの範囲内にとどめようとしています。

コンテナーの背景と 3 つの画像は、常に互いの上に位置するように、すべての位置関係を維持する必要があります。ブラウザ ウィンドウのサイズに合わせて大きくなったり小さくなったりしますが、幅が 800 ピクセルを超えないようにしてください。

私が抱えている問題は、背景とフッターが左にスラムし、ボタンの div が右に移動することです。

私のJSFIDDLE

HTML:

<div id="container">
<div id="footer">
    <div id="left">
        <input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
    </div>
    <div id="middle">
        <input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
    </div>
    <div id="right">
        <input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
    </div>
  </div>
</div>

CSS:

#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}

#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}

#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}

#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}

#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}

.imgstretch {
width:100%;
}
4

1 に答える 1

2

いくつかのことが起こっています。

1）フッターは固定位置に設定されているため、親要素を無視してウィンドウに固定されます。これがレイアウトの問題かどうかはわかりませんが、注意が必要です。

2) すでにクラスが定義されている要素にインライン スタイルが設定されている。不要に思えます。

3) % と px に関連して、ディメンションの計算が大きくずれています。36% は (0.36 * 800) で、294px ではなく 288px となり、20px の余白が追加されます。

私はあなたのフィドルをフォークしました。 http://jsfiddle.net/ZBJPF/8/

html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
}
#container {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
}
#footer {
    width: 100%;
    max-width: 780px;
    max-height: 80px;
    margin: 0 auto;
    padding-left: 20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    background-color: #009FC1;
}
.footer-element-lg {
    float: left;
    width: 36%;
    max-width: 280px; 
    position: relative;
}
.footer-element-sm {
    float: left;
    width: 28%;
    max-width: 220px;
    position: relative;
}
#left {
    background-color: #CCCCCC;
}
#middle {
    background-color: #889FC1;
}
#right {
    background-color: #9999DD;
}
.imgstretch {
    width:100%;
    border: none;
}

<div id="container">
    <div id="footer">
        <div id="left" class="footer-element-lg">
            <input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
        </div>
        <div id="middle" class="footer-element-sm">
            <input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
        </div>
        <div id="right" class="footer-element-lg">
            <input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
        </div>
    </div>
</div>

連続性のために 20px の余白を削除し、間隔を 20px のパディングにしました。

于 2013-04-16T15:02:49.100 に答える