股利重复-X包围左右DIV

Question

http://jsfiddle.net/CApW2/

我不能把它做了正确的方式，左右DIV是两个图像和中心是重复-X股利。 左右div必须是固定的宽度和高度，center div固定的高度，但是拉伸的宽度。

Answer 1

这可以是固定的或流体的高度。左列和右列是固定宽度，而中间列是流体。在源文件中，旁边的列是旁边的和后面的的中心列。虽然你可以直接设置每一列的样式，但在编辑宽度/填充/边距/边框时要小心......你必须在CSS中对每一个CSS进行多项更改（但它的分组和评论相当好，所以你也不应该有太多的改变很麻烦）。

的CSS：

<style> 
.two-col { 
overflow:hidden; 
} 
.two-col > aside { 
position:relative; 
float:left; 
width:250px; 
padding-bottom:10000px; 
margin-bottom:-10000px; 
} 
.two-col > div { 
position:relative; 
float:left; 
width:100%; 
padding-bottom:10000px; 
margin-bottom:-10000px; 
} 
.two-col.right { 
padding-left:0; 
padding-right:270px; /* Width of aside (width+padding+margin+border) */ 
} 
.two-col.right > aside { 
margin-right:-100%; 
} 
.two-col.right > div { 
margin-right:10px; 
padding-right:10px; 
} 
.two-col.left { 
padding-left:260px; /* Width of aside (width+padding+margin+border) */ 
} 
.two-col.left > aside { 
right:260px; /* Width of aside (width+padding+margin+border) */ 
margin-left:-100%; 
} 
.two-col.left > div { 
margin-left:-10px; /* Left padding + left border */ 
padding-left:10px; 
} 
.searchbar.two-col .two-col { 
padding-bottom:10000px; 
margin-bottom:-10000px; 
} 

.searchbar { 
height:75px; /* Simply remove this to have fluid height */ 
} 
.searchbar .leftColumn { /* Left Column */ 

} 
.searchbar .rightColumn { /* Right Column */ 

} 
.searchbar .centerColumn { /* Center Column */ 

} 

</style> 

和HTML：

<div class="two-col left searchbar"> 
<div> 
    <div class="two-col right"> 
    <div class="centerColumn">Center</div> 
    <aside class="rightColumn">Right</aside> 
    </div> 
</div> 
<aside class="leftColumn">Left</aside> 
</div>