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）您的尺寸计算与您的百分比和像素有关。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>

为了连续性，我删除了 20px 的边距并将间距设置为 20px 的填充。

于 2013-04-16T15:02:49.100 回答