CSS中的靈活佈局像vBulletin

當您調整vBulletin的大小時，您可以看到3列很好地重新調整（Board Name，Threads/Posts，Last Post）。CSS中的靈活佈局像vBulletin

你怎麼能在CSS中實現類似的東西？當我嘗試這樣做時，它總是互相重疊。 .board圖標寬度需要保持不變，因爲裏面有圖像。

這是我的CSS

.board-icon { 
float: left; 
width: 55px; 
} 

.board-title { 
float: left; 
background: red; 
width: 50%; 
} 

.board-info { 
float: left; 
background: green; 
width: 120px; 
} 

.board-lastpost { 
float: left; 
background: orange; 
width: 240px; 
}

下面是使用相同的靈活的佈局其他一些例子：

來源

2012-07-19 Falko Joseph

它背後的CSS對於現代瀏覽器來說並不複雜。儘管這些技術中的一些在早期版本中不起作用，即沒有一些修改。

使用這個HTML

<body> 

    <div id="canvas"> 

     ... 

    </div> 

</body>

而這個CSS

body { 
    margin:0; 
    padding:0; 
    position:relative; 
} 

#canvas, .main-width { 
    min-width:960px; 
    width: 80%; 
    margin:0 auto; 
} 

.clear, #canvas:after { 
    clear: both; 
    height: 0; 
    visibility: hidden; 

#canvas:after { 
    content: "."; 
    display: block; 
}

下手％的寬度，而不是像素寬度的工作，你在你的例子都有。使用固定寬度值的唯一時間應該是最小寬度的取樣。

你可以創建你的畫布格內的兩個液柱例如

<div class="col1> 

    ... 

</div> 

<div class="col2"> 

    ... 

</div> 

<br class="clear" />

而CSS（不需要最小寬度現在爲960像素的34％是一樣好）

.col1,.col2 { 
    float:left; 

} 

.col1 { 
    width:34%; 
} 

.col2 { 
    width:66%; 
}

注意上面的.main-width聲明？這將#canvas樣式應用於#canvas div中的任何容器，使其具有完全相同的寬度和流暢度。

<div class="main-width"> ... </div>

這應該讓你在正確的軌道上，只要記住你需要在％不是px工作。如果您需要使用元素邊框，請確保它們是display:block以用％寬度保持定位。

來源

2012-07-20 00:18:43

CSS中的靈活佈局像vBulletin

回答

相關問題