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>

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

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

Итак, есть ли способ получить такую ​​же функциональность в HTML / CSS?Было бы здорово, если бы мы могли создавать CSS-классы .HBox .VBox .Spacer и без 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;
}

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