模仿一個HBox/VBox與CSS

我是一個老學校的桌子的傢伙，當談到現代的HTML時，我感到非常困惑。我正在嘗試一些簡單的垂直/水平佈局（即Flex的hbox/vbox），但我們在複製它們時遇到了很大困難。模仿一個HBox/VBox與CSS

一張舊桌子會是這個樣子了與HBox：

<table width="100%" height="100"> 
    <tr valign="middle"> 
     <td nowrap style="background-color:#CCC">I am text on grey</td> 
     <td width="50%" valign="top">displays top</td> 
     <td width="50%" align="right">Autosize Fill (displays bottom right)</td> 
    </tr> 
</table>

現在，我試圖用div的做到這一點，但都無濟於事。當使用display：inline時，我無法設置百分比寬度 - 它只需要顯式寬度。當使用float：left時，設置100％的百分比寬度會使其真正達到100％，並向下推動下一個div。

這是我一直在玩代碼：

<html> 
<head> 
</head> 
<style type="text/css"> 
div.test { background-color: #EE9; padding:5px;} 
body { font-family: Arial; } 

ul { 
    list-style-type:none; 
} 

ul li { 
    float:left; 
} 

.hboxinline div { 
    display: inline; 
} 

.hboxfloat div { 
    float:left; 
} 

.cellA { 
    background-color:#CCC; 
    width:100%; 
} 
.cellB { 
    background-color:#DDD; 
    min-width:100; 
} 
.cellC { 
    background-color:#EEE; 
    min-width:200; 
} 

</style> 

<body> 
A = 100%, b = 100, c = 200 

<div class="test">old school table 
<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td class="cellA">A</td> 
     <td class="cellB">B</td> 
     <td class="cellC">C</td> 
    </tr> 
</table></div> 

<br/> 

<div class="test"> 
    float:left 
    <div class="hboxinline"> 
     <div class="cellA">A</div> 
     <div class="cellB">B</div> 
     <div class="cellC">C</div> 
    </div> 
</div> 

<br/> 

<div class="test">ul/li 
    <ul class="ulli"> 
     <li class="cellA">A</li> 
     <li class="cellB">B</li> 
     <li class="cellC">C</li> 
    </ul> 
</div> 

<br/> 

<div class="test"> 
    display:inline 
    <div class="hboxfloat"> 
     <div class="cellA">A</div> 
     <div class="cellB">B</div> 
     <div class="cellC">C</div> 
    </div> 
</div> 


</body> 
</html>

來源

2010-06-02 ansiart

爲什麼不使用你想要的？

<html> 
<head> 
</head> 
<style type="text/css"> 
div.test { background-color: #EE9; padding:5px;} 
body { font-family: Arial; } 

ul { 
    list-style-type:none; 
    padding: 0; 
    margin: 0; 
} 

ul li { 
} 

.hboxinline div { 
} 

.hboxfloat div { 
} 

.cellA { 
    background-color:#CCC; 
    width:100%; 
} 
.cellB { 
    background-color:#DDD; 
    min-width:100; 
} 
.cellC { 
    background-color:#EEE; 
    min-width:200; 
} 
.inlineCell { 
    display: table-cell; 
} 

</style> 

<body> 
A = 100%, b = 100, c = 200 

<div class="test">old school table 
<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td class="cellA">A</td> 
     <td class="cellB">B</td> 
     <td class="cellC">C</td> 
    </tr> 
</table></div> 

<br/> 

<div class="test"> 
    float:left 
    <div class="hboxinline"> 
     <div class="cellA inlineCell">A</div> 
     <div class="cellB inlineCell">B</div> 
     <div class="cellC inlineCell">C</div> 
    </div> 
</div> 

<br/> 

<div class="test">ul/li 
    <ul class="ulli"> 
     <li class="cellA inlineCell">A</li> 
     <li class="cellB inlineCell">B</li> 
     <li class="cellC inlineCell">C</li> 
    </ul> 
</div> 

<br/> 

<div class="test"> 
    display:inline 
    <div class="hboxfloat"> 
     <div class="cellA inlineCell">A</div> 
     <div class="cellB inlineCell">B</div> 
     <div class="cellC inlineCell">C</div> 
    </div> 
</div> 


</body> 
</html>

來源

2010-06-02 20:04:12 jcolebrand

因爲這個線程：http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout -in-html 我試圖弄清楚如何爲後代着想「現代」... – ansiart 2010-06-02 20:26:42

哎呀，我沒有看到你已經把東西放進去了。目前爲止在Chrome中運行良好，將測試其他.... 謝謝！ – ansiart 2010-06-02 20:29:37

嗯，即不喜歡它 - 但它看起來好像其他所有事情....標記回答 – ansiart 2010-06-02 20:31:08

相信百分比均實現了類似的結構的唯一途徑。在這裏：

<div class="table"> 
<span class="left">I am text on grey</span> 
<span class="mid">displays top</span> 
<span class="right">Autosize Fill (displays bottom right)</span> 
</div>

和

.table { 
    width:100%; 
    line-height:100px; 
    position:relative; 
} 
.left { 
    width:10%; 
    background-color:#CCC; 
    display:inline-block; 
} 
.mid { 
    width:10%; 
    display:inline-block; 
    position:relative; 
    vertical-align:text-bottom; 
} 
.right { 
    width:79%; 
    text-align:right; 
    vertical-align:text-top; 
    display:inline-block; 

}

將讓你有點接近。

來源

2010-06-02 20:02:03 edl

它是2015年和CSS3 flexbox是由IE10 +，Safari 6 +支持。我已經制作了HBox和VBox的純CSS實現 - https://gist.github.com/Munawwar/7926618。這爲我節省了很多工作時間。

在這種特殊情況下，它可以被用來如下：

<div class="hbox"> 
    <div class="flex">A</div> 
    <div style="min-width: 100px;">B</div> 
    <div style="min-width: 200px;">C</div> 
</div>

來源

2015-04-27 13:24:14 Munawwar

模仿一個HBox/VBox與CSS

回答

相關問題