Question

这可能是一个基本的html + css问题，但有点想让我解决：S

你知道，我需要一个'3列'布局。我想要一个中心列（比方说10em宽度）和两侧各一列（让我们说每个2em宽）。我希望屏幕中间有三个......

如何通过单独声明每一个来完成它？我的意思是，做这样的事情：

<div class="left"><!-- 2em width --></div>
<div class="central"><!-- 10em width --></div>
<div class="right"><!-- 2em width --></div>

有没有办法在不将它们放在另一个容器中的情况下完成它？

THX！

Answer 1

当我寻找类似的解决方案时，这极大地帮助了我：http://matthewjamestaylor.com/blog/perfect-3-column.htm

Answer 2

你觉得给他们宽度百分比是什么意思？

.left {
    margin-left: 15%;
    width: 10%;
}
.central {
    width: 50%;
}
.right {
    width: 10%;
    margin-right: 15%;
}
div { float: left; height: 100%; }
body { height: 1000px;}

因为15 + 10 + 50 + 10 + 15 = 100。

我甚至添加了一个JsFiddle：http://jsfiddle.net/VjbFz/

我仍然认为将它们包装在容器中是一种更好的解决方案。

Answer 3

试试这个：

<强> HTML：

<body>
    <div id="container">
        <div class="left"><!-- 2em width --></div>
        <div class="central"><!-- 10em width --></div>
        <div class="right"><!-- 2em width --></div>
        <div class="cleaner"></div>
    </div>
</body>

<强> CSS：

body {
    text-align: center;    
}

.cleaner { clear: both; }

#container {
    margin: 0 auto;
    width: 14em;
    text-align: left;
}   

.left { width: 2em; float: left; }
.central { width: 10em; float: left; }
.right { width: 2em; float: left; }

.cleaner就在这里只是因为花车。

我也在JsFiddle上添加了它：http://jsfiddle.net/jmzWr/

我希望它有用：）

HTML列位于屏幕中间

3 个答案: