用CSS模仿HBox / VBox


Mimicking a HBox / VBox with CSS

我是一个守旧派的餐桌小伙子，对现代HTML感到很困惑。我正在尝试像垂直/水平布局一样简单的东西(即Flex的hbox / vbox)，但是复制它们时遇到了很大的困难。

对于HBox，旧表看起来像这样：

1
2
3
4
5
6
7
<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向下推。

这是我一直在玩的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<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

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>

<br/>


    float:left
   
        A
        B
        C
   


<br/>

ul / li
    <ul class="ulli">
        <li class="cellA">A
</li>

        <li class="cellB">B
</li>

        <li class="cellC">C
</li>

   
</ul>



<br/>


    display:inline
   
        A
        B
        C
   



</body>
</html>

为什么不使用您想要的？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<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

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>

<br/>


    float:left
   
        A
        B
        C
   


<br/>

ul / li
    <ul class="ulli">
        <li class="cellA inlineCell">A
</li>

        <li class="cellB inlineCell">B
</li>

        <li class="cellC inlineCell">C
</li>

   
</ul>



<br/>


    display:inline
   
        A
        B
        C
   



</body>
</html>
相关讨论

现在是2015年，IE10和Safari 6支持CSS3 flexbox。
我已经完成了HBox和VBox的纯CSS实现-https://gist.github.com/Munawwar/7926618。这为我节省了很多工作时间。

在这种特殊情况下，可以按以下方式使用：

1
2
3
  A
  B
  C

我相信百分比是达到类似结构的唯一方法。此处：

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

和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;

}

会让您有点接近。