1

下面是我的代码：

<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div

CSS：

#footer {
    width:500px;
    position:relative
}
#left_footer{
    float:left;
}
#right_footer{
    float:right;
}

我正在尝试此代码，但我的图像未对齐以使其始终对齐左页脚中的左侧和右页脚中的右侧。请建议！

4

3 回答 3

3

我会这样处理布局：

http://jsfiddle.net/yWmZ5/1/

HTML

<div id="footer">
    <div id="left_footer">
        <img src="http://placekitten.com/100/100" />
    </div>
    <div id="right_footer">
        <img src="http://placekitten.com/100/100" />
    </div>
</div>

CSS 

#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }

确保从 HTML 中去除所有样式（例如 - 对齐等）并将其放入 CSS 中。

于 2013-04-16T16:57:24.043 回答
0

试试这种风格：

#footer > div{width:50%}
于 2013-04-16T17:00:50.560 回答
0

你需要有一些宽度div#left_footer，div#right_footer以便在中间显示内容

将相应的 css 更改为：

#left_footer{
    text-align:center;
    float:left;
    width:50%;

    }
#right_footer{
    float:right;
    width:50%;

}

看到这个小提琴

于 2013-04-16T17:01:53.960 回答