三列宽度

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> 

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; } 

我想这是你想要的。