CSS 3欄頁腳佈局（列偏移）

所以我寫了一個非常簡單的3列腳註的佈局，應該工作。但是我在不同的瀏覽器中得到了不同的結果。CSS 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： Chrome Error

這裏就是我在IE9 IE9 Error

用得到作爲SIM卡儘管如此，它應該起作用（理論上），但事實並非如此。應該有3行，每行300像素。在這一點上需要一個新的眼睛。 TIA！

來源

2013-08-20 rws907

你的HTML的解決方案，是要永遠給在不同的瀏覽器不同的結果。

我搞掂你目前的HTML和CSS給予適當的三欄佈局。我加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中使用跨瀏覽器的解決方案，這是最好的解決方案。

好運 Kiru

來源

2013-08-20 00:37:22 kirushanths

謝謝你的小提琴。它在Chrome和FF中完美運行，但在IE中所有的DIVS都堆疊在一起。我會研究聖盃解決方案，看看它是否有幫助。 – rws907

@ rsmith84感謝給予好評和正確的答案！ :) – kirushanths

我可以在IE中查看小提琴，它是完美的，但是當我複製並粘貼它來替換我的代碼時，所有div都堆疊在彼此之上。有任何想法嗎？ – rws907

你的所有的div都浮到你要找的內容。

試試這個，它很適合我上的jsfiddle：

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

考慮你有什麼，鉻在做什麼，你問他要顯示，而IE9不得不在中間的第2格無緣無故。

來源

2013-08-20 00:33:44 Sugar

CSS 3欄頁腳佈局（列偏移）

回答

相關問題