All geek questions in one place

Mimicking HBox / VBox with CSS

I'm an old guy at school desks, and I'm pretty puzzled when it comes to modern HTML. I'm trying to do something as simple as vertical / horizontal layouts (i.e. Flex hbox / vbox), but I have a big problem replicating them.

The old table would look something like this for 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 am trying to do this with a div, but to no avail. When using display: inline, I cannot set the percentage width - it only requires an explicit width. When using float: left, the settings of 100% percent width make it really be 100% and push the next div down.

Here is the code that I played with:

 <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>
+4
source share
3 answers

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>
+2
source

I believe that interest is 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; }

You get a little closer.

0
source

This is 2015 and CSS3 flexbox supported by IE10 +, Safari 6+. I made a pure CSS implementation of HBox and VBox - https://gist.github.com/Munawwar/7926618 . It saves me many hours at work.

In this particular case, it can 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>
0
source

Source: https://habr.com/ru/post/1311661/

More articles:


All Articles