CSS 3 列页脚布局(列偏移)

Question

因此，我编写了一个非常简单的 3 列页脚布局，应该可以使用。但我在不同的浏览器中得到不同的结果。

CSS:

#footer{
width:980px;
height: 150px;
padding: 10px;
font-size: 12px;
background-color: #94171b;
color: #fff;
}

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{width:300px; text-align:left; border: 1px solid;}
#footer_right{float:right; width:300px; text-align:left; border: 1px solid;}

HTML

<div id="footer">
  <div id="footer_left">
    <b>SITE NAVIGATION</b><br>
        <a href="/dev/site/">Home</a><br>
        <a href="/dev/site/about.php">About</a><br>
        <a href="/dev/site/dining.php">Food</a><br>
        <a href="/dev/site/drinks.php">Drinks</a><br>
        <a href="/dev/site/">Contact</a>
      </div>
      <div id="footer_middle">
        <b>CONNECT WITH US SOCIALLY</b><br>
        http://www.facebook.com/tbd
        http://www.twitter.com/tbd
        http://www.instagram.com/tbd
        http://www.youtube.com/tbd
      </div>
      <div id="footer_right">
        &copy;2013 Site. All rights reserved<br><br>
        Support Local Business
      </div>
</div>

这是我在 Chrome 中得到的:

这是我在 IE9 中得到的

就这么简单，它应该可以(理论上)工作，但事实并非如此。一行中应该有 3 列，每列 300 像素。在这一点上需要一双新的眼睛。 TIA!

Answer 1

您的 HTML 解决方案将始终在不同的浏览器中给出不同的结果。

我修复了您当前的 HTML 和 CSS 以提供适当的 3 列布局。我向所有元素添加了 float:left。

这是 jsFiddle:http://jsfiddle.net/HhCYh/

更好的解决方案:

就我自己的 HTML 列布局而言，我使用了这个 HolyGrail 3 - 列布局，它在所有浏览器甚至 IE 中都表现出色。

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

看看吧。它需要在文件中添加额外的 HTML 标记，但如果您想要在 Chrome 和 IE 中使用跨浏览器解决方案，这是最佳解决方案。

祝你好运桐生