我是一个守旧派的人，对现代 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>
关于css - 用 CSS 模仿 HBox/VBox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2961010/