四中校頁腳在CSS

我使用純CSS開發了四列腳註，但我已經遇到了一些問題： 1）我無法實行垂直1px的白色規則並排科拉姆 2）背景不包括整個四個柱子 3）在Chrome中，列不會出現在一個單一的寬度上，第四個列被撞到下面。

2012-10-09 Justin Newbury

邊框寬度（1個像素）被添加到寬，所以四次25％加4個像素總是超過100％。你可能最好使用像素值來定義cols的寬度（或實際使用CSS3列，它帶有列間距選項）。 – ACJ

你應該隔離你的頁腳html和css並在這裏發佈。作爲一種資源，這篇文章可能對未來的讀者有用，因爲它現在可能會被打破，並且可能不會太豐富。 –

如果你知道你可以用純CSS做頁腳的準確寬度。我只是在前3列添加了一個右邊框。僅供參考，您忘記了在CSS中聲明邊框的顏色。我還將列的寬度更改爲235px，即940/4。前3個具有1px邊框，因此寬度爲：234px加上邊框。這裏是小提琴http://jsfiddle.net/eLzPk/7/

#footer dl { 
    background: black; 
    float: left; 
    margin: 0; 
    padding: 10px 0 5px 0; 
    width: 234px; 
    border-right: 1px solid #fff; 
} 

#footer dl + dl + dl + dl { 
    width: 235px; 
    border-right: none; 
}

編輯

爲了進一步說明與CSS的問題之一是有邊界和利潤加到聲明寬度，所以如果你有四列的寬度：25％和1px的邊界來創建一個分界線，它實際上是100％+ 3px，當然這大於100％，所以它會導致css包裝。

有2個新的解決方案，這在CSS中，其中一個是相當支持，它被稱爲框大小，這是一個很好的文章來引用。 http://css-tricks.com/box-sizing/基本上它將框的大小設置爲聲明的寬度，並在其中添加邊框和邊距。缺點是IE7不支持它。因此，爲了正確使用它，最好使用IE條件語句併爲這些瀏覽器實施一些css/js hack。

另一種解決方案是flexbox模型，它的支持很少。但值得一看。它可以讓你有一個任意大小的容器，並且使用比例來放大它裏面的孩子，將它們垂直或水平地放置等等。它解決了盒子模型問題以及各種定位和居中問題。

來源

2012-10-09 23:43:55 user1289347

添加了一個分號以獲得整個頁腳上的黑色背景，並且還爲頁腳提供了與頁腳相同的最小高度，因此白線一直走到底部。 http://jsfiddle.net/eLzPk/3/ – keithwyland

@wylander這是一個很好的觀點，我做了相同的編輯，但我將dl的最小高度更改爲235px，因爲存在15px的填充，導致了一個奇怪的空白區域在頁腳的右下角。 http://jsfiddle.net/eLzPk/7/ – user1289347

盒子大小是解決方案。您的寬度爲25％，然後左右填充。除非您在DL樣式中使用「box-sizing：border-box;'（帶有瀏覽器前綴），否則這會使最終結果大於25％。 –

這樣的事情呢？在一個可調整瀏覽器大小的內部添加一個固定大小的另一個Div容器。然後可以使用#footer中的註釋代碼來延伸背景。您必須瞭解您的利潤率，創建div尺寸時填充&邊框。

每一個像素數;）

Anywho希望這有助於！鏈接的jsfiddle在底部

#footer { 
    background: black 

    /* This would be your Background Image code for whole Footer. 
    background: url(FOOTER IMAGE) no-repeat center center fixed;    
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    */ 

    padding-right: 15px; 
    position: relative; 
    min-height: 250px; 
    text-align: center; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 
} /*IE6*/ 
#footerContainer { 
    width:940px; 
    height:250px; 
    display:block; 
} 

#footer dl { 
    display:inline-block;   
    background: black; 
    float: left; 
    text-align: left; 
    margin: 0px; 
    padding: 10px 0 5px 10px; 
    width: 224px; /* Take into account the 1px Border & padding*/ 
    height:inherit; 
    border-left: 1px solid white; 
}

像這樣：http://jsfiddle.net/GFargo/eLzPk/1/

來源

2012-10-09 23:55:55 GFargo

你沒有把css保存在那個小提琴裏，這裏是你的css http://jsfiddle.net/eLzPk/5/ – user1289347

的版本謝謝 - 仍然使用jsFiddle – GFargo

如ACJ提到：

邊框寬度（1個像素）被添加到寬度，所以四次25 ％加4個像素總是超過100％

你最好關閉定義一些設置值來解決這個問題。

您的速記邊框屬性無法正常工作，因爲雖然您定義了寬度（1px），但其類型（實心），您已丟失（顏色）。

如果你還在HTML5時，您可以使用標籤太...

粗略地說，有一些調整： http://jsfiddle.net/eLzPk/8/

來源

2012-10-10 00:04:53 user1752759

四中校頁腳在CSS

回答

相關問題