Question

我想让3个灵活的图像水平排列，并保持灵活的div容器的范围，具有灵活的背景，

容器的背景和3个图像应该在位置上彼此保持相关，因此它们总是在彼此的顶部。随着浏览器窗口的大小，它们应该越来越大，但宽度不超过800像素。

我遇到的问题是背景和页脚向左猛击，按钮div向右移动。

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），它将是288px，而不是294px，然后是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填充以保持连续性。

3灵活的父div中的灵活div

1 个答案: