HTML/CSS Spacer (как Flex)

Question

Мне было интересно, есть ли какой-либо метод использования HTML/CSS, например Flex/MXML. Я имею в виду, что в MXML глобально используются HBox, VBox и Spacer, и их поведение предсказуемо. Но в HTML/CSS мы используем много float, и у него всегда есть некоторые «скрытые сюрпризы».

С Flex/MXML Я хотел бы сделать:

<hbox width="100%"> 
    <button label="Button A" /> 
    <spacer width="100%" /> 
    <button label="Button B" /> 
    <button label="Button C" /> 
</hbox> 

• Если вы не знаете, сгибать я объясняю этот код: места HBOX каждый элемент внутри него бок о бок, и Spacer является невидимым элемент; разделитель со 100% не имеет такой же ширины, что и родительский (HBox), но заполняет оставшееся пространство; это означает, что A будет выровнен влево, а два - вправо.

Теперь в HTML/CSS я бы сделал кнопки B и C поплавка справа. Я также должен был бы изменить порядок кнопок, чтобы конечный результат был таким же. Кроме того, я, вероятно, поместил бы пустой тег с «clear: both», чтобы гарантировать, что ничто ниже не будет испорчено.

Итак, есть ли какая-либо техника для получения той же функциональности в HTML/CSS? Это было бы фантастически, если бы мы могли сделать классы .HBox .VBox .Spacer CSS и без javascript.

благодарит заранее.

Answer 1

я сделать что-то похожее на это, используя следующий вид разметки

<div class="formline"><!-- kind of like your hbox --> 
    <div class="buttongroup" id="group1"> 
     <button label="Button A"> <!-- of course, that's usually input type="submit" or something. --> 
    </div> 
    <div class="buttongroup" id="group2"> 
     <button label="Button B"> 
     <button label="Button C"> 
    </div> 
</div> 

Затем с помощью CSS стиль его. Я бы поплыл group1 влево, поплавок group2 вправо. Закрывающая форма содержит плавающие внутри нее. Кнопки отображаются в правильном порядке, мне не нужно их менять.

Это все логическая/структурная разметка и может быть оформлена различными способами; это не только для презентации.

Я использую разумные имена в зависимости от того, что я делаю, а не таких, как «group1», «group2».

Answer 2

Вы можете присвоить свой верхний уровень div классу с именем hbox и настроить его подпункты. Пример: http://jsfiddle.net/soparrissays/WJ2Lk/4/ HTML:

<div class="hbox"> 
    <input type="button" value="Button A" class="left-button" /> 
    <input type="button" value="Button C" /> 
    <input type="button" value="Button B" /> 
    <div class="clear"></div> 
</div> 

стиль:

.hbox { 
    margin-top:45px; 
} 

.hbox input { 
    float: right; 
} 

.hbox .left-button{ 
    float:left; 
} 

.clear{ 
    clear:both; 
} 

Это то, что вы ищете?