如何使用CSS居中两列? [英] How to center two columns using CSS?
本文介绍了如何使用CSS居中两列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将两列放在我的网站上,但有一些问题。每次更改的结果都是左侧位置(请参阅图片)。我究竟做错了什么?这是我的CSS:
I'm trying to center two columns on my website but there are some problems. The result of every change is left position (see picture). What am I doing wrong? Here's my CSS:
body {
background - image: url("../img/gray.png");
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #cc0000;
text - align: center;
}
#wrapper {
margin: 100px;
width: 1280px;
}
#leftcolumn {
float: left;
background - image: url("../img/gray.png");
margin: 10px 0px 10px 0px;
padding: 10px;
height: 682px;
width: 460px;
}
#rightcolumn {
float: left;
color: #333;
border: 1px solid # ccc;
background: #F2F2E6;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 439px;
display: inline;
position: relative;
}
谢谢
Thanks
推荐答案
因为两列的宽度小于包装的宽度(即959px vs 1280px),所以需要将两列放在固定宽度的容器中:
Since the two columns' width is less than the width of the wrapper (i.e. 959px vs 1280px), you'll need to place the two columns inside a fixed width container:
<div id="wrapper">
<div id="column_container">
<div id="column1"></div>
<div id="column2"></div>
</div>
</div>
然后执行下列操作:
And then do something like:
#column_container {
width: 959px;
margin: 0 auto;
}
这篇关于如何使用CSS居中两列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文