Question

我已经坐了一会儿想出一个问题的解决方案。我想建立一个由三列（左，中，右）组成的网站。这三个将一起覆盖整个屏幕宽度。一列将包含固定的像素值，另外两列应该与中间列在屏幕中心的宽度相同。

我需要左列和右列的原因是因为我想隐藏它们后面的东西，然后将这些东西设置为中间列的动画。

任何人都有解决方案吗？

Answer 1

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

我认为这就是你想要的。

Answer 2

我对宽度不满意：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/

三列宽度

2 个答案: