使用CSS模仿HBox / VBox

2023年12月3日 233次阅读

我是一个老式的桌子家伙,在谈到现代
HTML时我感到非常困惑.我正在尝试像垂直/水平布局这样简单的东西(即Flex的hbox / vbox),但是在复制它们时遇到了很大的困难.

对于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>

最佳答案 为什么不用你想要的？

<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>
点赞