Question

正在处理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列时放错位置虽然我已将整个页面包裹定义为100％并且＃content，＃middle和#sidebar两者都定义良好，但宽度仍为20％，50％和30％整个设计变得扭曲。

任何人都可以帮助我。

Answer 1

添加：

* {
box-sizing: border-box;
}

到你的CSS表

您可以添加更多信息 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将起作用

设计在3列CSS中变形

1 个答案: