股利重複-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>