0

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

你看，我需要一个“3 列”布局。我想要一个中心列（比如说 10em 宽度）和另外两列，每边一个（假设每个 2em 宽度）。我想要三个在屏幕中间...

我怎样才能通过分别声明它们来做到这一点？我的意思是，做这样的事情：

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

有没有办法做到这一点而不在另一个容器中进化它们？

谢谢！

4

3 回答 3

2

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

于 2012-11-25T20:03:21.910 回答
1

你觉得给他们一个百分比宽度怎么样？

.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/

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

于 2012-11-25T20:00:56.947 回答
0

尝试这个：

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/

我希望它会有所帮助:)

于 2012-11-25T22:15:36.950 回答