Подражание HBox/VBox с CSS

Я старый парень в школьных столах, и я очень озадачен, когда дело доходит до современного HTML. Я пытаюсь сделать что-то столь же простое, как вертикальные/горизонтальные макеты (т. Е. Hbox/vbox от Flex), но я испытываю серьезные трудности с их тиражированием.Подражание HBox/VBox с CSS

старая таблица будет выглядеть примерно так для 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>

источник

2010-06-02 ansiart

Почему бы не использовать то, что вы хотите?

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

источник

2010-06-02 20:04:12 jcolebrand

из этой нити: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout -in-html Я пытаюсь понять, как быть «современным» для потомков ... – ansiart

oops Я не видел, чтобы вы что-то вложили. Это хорошо работает до сих пор в Chrome, проверит остальные .... благодаря! – ansiart

Ну, то есть не нравится - но похоже, что все остальное делает .... отметка ответила – ansiart

Я считаю, проценты являются единственным способом достижения аналогичной структуры. Здесь:

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

}

Получит вы несколько близко.

источник

2010-06-02 20:02:03 edl

Это 2015 и CSS3 flexbox поддерживается IE10 +, Safari 6+. Я сделал чистую CSS-реализацию HBox и VBox - 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>

источник

2015-04-27 13:24:14 Munawwar

Подражание HBox/VBox с CSS

ответ

Смежные вопросы