css - 三列的宽度

Question

我已经坐了一段时间来想出解决问题的办法。我想制作一个由三列（左、中、右）组成的网站。这三个将一起覆盖整个屏幕宽度。一列将由一个固定的像素值组成，另外两列的宽度应与中间列在屏幕中央的宽度相同。

我需要左右两列的原因是因为我想在它们后面隐藏东西，然后将这些东西动画化到中心列中。

有人有解决方案吗？

Answer 1

我对宽度不满意：对此有 10000% 位，也许有人可以想出一个更清洁的解决方案，但我认为这可以满足您的描述。当您正在寻找纯 CSS 解决方案时，这些类型的布局有点棘手。

HTML：

<div id="content">
<p>Content goes in here</p>
<ul>
    <li>Whatever</li>
    <li>Kind</li>
    <li>Of</li>
    <li>Content</li>
</ul>        
<div class="sideCol" id="left"></div>
<div class="sideCol" id="right"></div>

​</p>

CSS：

#content
{
    width: 200px;
    margin: 0 auto;
    position: relative;
}

.sideCol
{
    width: 10000%;
    height: 100%;
    position: absolute;
}

#left
{
    background-color: red;
    right: 200px;
    top: 0;
}

#right
{
    background-color: blue;
    top: 0;
    left: 200px;
}​

http://jsfiddle.net/fLH9T/

Answer 2

HTML

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

CSS

.left { float:left; width:33%; height:200px; z-index:100; diplay:block; }
.center { float:left; width:33%; height:200px; z-index:1; diplay:block; }
.right { float:right; width:33%; height:200px; z-index:100; diplay:block; }

我想这就是你想要的。