Mimicking a HBox / VBox with CSS
I'm an old school tables guy, and am pretty baffled when it comes to modern HTML. I'm trying to something as simple as vertical / horizontal layouts (i.e. Flex's hbox/vbox), but am having major difficulty replicating them.
An old table would look something like this for an 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>
Now I'm trying to do this with div's, but to no avail. When using display:inline, I cannot set a percentage width -- it only takes explicit widths. When using float:left, settings 100% percentage width causes it to really be 100% and pushes the next div down.
Here's the code I've been playing with:
<html>
<head>
</head>
<style type="text/css">
div.test { background-color: #EE9; padding:5px;}
body { font-family:开发者_Go百科 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>
Why not use what you want?
<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>
I believe percentages are the only way to achieve a similar structure. Here:
<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>
and
.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;
}
Will get you somewhat close.
It is 2015 and CSS3 flexbox is supported by IE10+, Safari 6+. I've made a pure CSS implementation of HBox and VBox - https://gist.github.com/Munawwar/7926618. It is saving me a lot of hours at work.
In this particular case, it could be used as follows:
<div class="hbox">
<div class="flex">A</div>
<div style="min-width: 100px;">B</div>
<div style="min-width: 200px;">C</div>
</div>
加载中,请稍侯......
精彩评论