設計越來越扭曲

我工作的3列布局的CSS和下面是我的CSS代碼：設計越來越扭曲

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 

body { 
    font-family: 'Open Sans', sans-serif; 
    color: #666; 
} 

/* STRUCTURE */ 

#pagewrap { 

    width: 100%; 
    margin: 20px auto; 
} 
#header { 
    height: 200px; 
    padding: 0 15px; 
} 
#content { 
    width: 20%; 
    float: left; 
    padding: 5px 15px; 
} 

#middle { 
    width: 50%; /* Account for margins + border values */ 
    float: left; 
    padding: 5px 15px; 
    margin: 0px 5px 5px 5px; 
} 

#sidebar { 
    width: 30%; 
    padding: 5px 15px; 
    float: left; 
} 
#footer { 
    clear: both; 
    padding: 0 15px; 
}

現在，這裏是我已經使用這個CSS網頁... http://www.megahunt.in/abhijit/test/innerindex.php

問題是，當加載#sidebar列時出現錯位，雖然我已將整個pagewrap定義爲100％，並且＃content，#middle和#sidebar都以20％，50％和30％整個設計變得扭曲。

任何人都可以請幫我在這。

來源

2015-04-12 user3305327

地址：

* { 
box-sizing: border-box; 
}

到你的CSS表

可以geat更多信息here

編輯：當你在你的CSS使用*這意味着它將面向所有的HTML標籤。基本上你的邊框和填充時，不使用邊框框的大小超出設置的寬度。這意味着一個寬度爲50％，寬度爲20px的容器，實際寬度將始終爲50% + 20px padding-left + 20 px padding-right邊框將會使您的邊框或元素填充設置在您想要的寬度內

再次編輯：甚至更多。當您使用基於百分比的寬度時，您必須考慮您的利潤率...在您的網絡中，您已將margin:0px 5px 5px 5px;設置爲您的#middle集裝箱。這意味着20% + 50% + 30% + margin它超過了100％，所以你的浮動元素不會並排。如果你想使用的利潤率嘗試使用％的措施：

#content {width:20%} 
#middle {width:48%; margin:0 1%;} 
#sidebar {width:30%}

這意味着20+48+1+1+30= 100，將工作

來源

2015-04-12 19:11:39

@Alvaro ...添加它在哪裏？ – user3305327

好吧，在你的CSS風格..你有其餘的CSS。無論如何，我做了幾個「編輯」更好的解釋。再讀一遍，如果你想 –

@alavaro ...謝謝你解釋所有這些......再次感謝 – user3305327

設計越來越扭曲

回答

相關問題