3靈活父DIV中靈活的div

Question

我試圖讓3個靈活的圖像在水平方向排隊，並保持其具有靈活的背景及其靈活的div容器的範圍內，

容器的背景和3張照片應該全部保持彼此的位置關係，以便它們始終位於彼此之上。它們應該隨瀏覽器窗口的大小而變得越來越小，但寬度不超過800像素。

我遇到的問題是左側的背景和頁腳大滿貫，按鈕divs正確。

My 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%; 
} 

Answer 1

你必須去的一對夫婦的事情。

1）頁腳設置爲固定位置，這會使其忽略父元素並將其自身固定到窗口。我不知道這是否是您佈局的問題，但需要注意的地方。

2）你已經在已經有一個定義類的元素上設置了內聯樣式。似乎沒有必要。 3）您的尺寸計算結果與您的％和px相關。 36％應該是（0.36 * 800），它會以288像素，而不是294像素，然後再加上20像素的邊距。

我已經分叉你的小提琴。 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> 

我除去20像素的裕度和取得的間距爲20像素的填充的連續性的緣故。