我如何使用 css 将我的网页分成 3 列，html 中的框架集组成了太多无法处理的页面，我该如何在 css 中做到这一点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25583242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?
提问by gap
i want my page to have 3 columns, with the left and right column to have the same width, and the center column to have the content and forms etc. i have full knowledge of html but jest started css. the left and right column should be 220px each, and the center column to take the rest of the width. i want there to be a margin of 5px between all 3 columns and the window. also how do i add different backgrounds to the 3 columns - as i tried earlier but the backgrounds didnt come. also all 3 columns should take the whole height of the window (keeping in mind the 5px margin)
我希望我的页面有 3 列，左列和右列具有相同的宽度，中心列具有内容和表单等。我对 html 有充分的了解，但开玩笑地开始了 css。左栏和右栏各应为 220px，中心栏为其余的宽度。我希望所有 3 列和窗口之间都有 5px 的边距。还有我如何向 3 列添加不同的背景 - 正如我之前尝试过的，但背景没有出现。所有 3 列都应该占据窗口的整个高度（记住 5px 边距）
Thanks in advance!
提前致谢！
采纳答案by Paco
I made you a fiddle here
我让你成为了这里的小提琴
And here the code: 1. HTML
代码如下： 1. HTML
<div id="left">text</div>
<div id="center">text</div>
<div id="right">text</div>
2. CSS
2.CSS
html, body {
height: 100%;
margin: 0;
}
div {
height: 100%;
background-color: red;
float: left;
}
#left {
width:220px;
margin: 5px;
}
#center {
margin: 5px 0;
width: calc(100% - 460px);
}
#right {
margin: 5px;
width: 220px;
}
I am using the calc() function for css. Quite new so not all browsers actually support it. You can find more details about support here
我正在为 css 使用 calc() 函数。相当新，因此并非所有浏览器实际上都支持它。您可以在此处找到有关支持的更多详细信息
BTW: To change the background simply add
顺便说一句：要更改背景只需添加
background-color: #000;
to a div and you change the color.
到 div 并更改颜色。
回答by user6875529
Well, this would work, but why are you using classes for this?, it's something you wouldn't want to use in your website again so ID's would be better for this. Also to not mess up the width of the page, you better use % values, something like this.
嗯，这行得通，但是您为什么要为此使用类？这是您不想再次在您的网站中使用的东西，因此 ID 会更好。同样为了不弄乱页面的宽度，您最好使用 % 值，例如这样的值。
The HTML
HTML
<div id="container">
<div id="leftContent"></div>
<div id="mainContent"></div>
<div id="rightContent"></div>
</div>
and then the CSS
然后是 CSS
#leftContent {
float:left;
width: 30%;
background-color: red;
}
#rightContent {
float: right;
width: 30%;
background-color: green;
}
#mainContent {
width: 30%
float: right
background-color: blue;
margin: 1%;
padding: 1%; //Not Required
}
Of course the percentages for the width will vary depending on how your body/container width is setup.
当然，宽度的百分比将根据您的主体/容器宽度的设置方式而有所不同。
回答by zsawaf
I'm not sure this would work, since I'm just jotting this down at the top of my head, but I hope it helps.
我不确定这会起作用，因为我只是在头顶记下这个，但我希望它会有所帮助。
CSS
CSS
.leftContent {
float:left;
width:220px;
background-color: red;
margin: 5px;
}
.rightContent {
float:right;
width:220px;
background-color: green;
margin: 5px;
}
.mainContent {
padding: 15px; //optional
background-color: blue;
}
HTML
HTML
<div id="container">
<div class="leftContent"></div>
<div class="mainContent"></div>
<div class="rightContent"></div>
</div>
