用 CSS 模拟 HBox / VBox答案

【问题标题】：Mimicking a HBox / VBox with CSS用 CSS 模拟 HBox / VBox
【发布时间】：2015-08-02 19:10:10
【问题描述】：

我是一个老学生，当谈到现代 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>

【问题讨论】：

标签： css

【解决方案1】：

为什么不使用你想要的？

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

【讨论】：

因为这个帖子：stackoverflow.com/questions/83073/… 我正试图弄清楚如何为了后代而变得“现代”......
哎呀，我没有看到你放了一些东西。到目前为止在 Chrome 中运行良好，将测试其他......谢谢！
好吧，我不喜欢它——但它看起来好像其他所有东西都可以......标记已回答
是的，IE 不喜欢很多东西... :p ~ 你是在兼容模式下使用 IE7 还是 IE8？应该在IE8正常和IE9下工作

【解决方案2】：

我相信百分比是实现类似结构的唯一方法。这里：

<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;

}

会让你更亲近。

【讨论】：

【解决方案3】：

现在是 2015 年，IE10+、Safari 6+ 支持 CSS3 flexbox。我已经制作了 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>

【讨论】：