плавающее переменное количество делений в левый / правый столбцы

Question

плавающее переменное количество делений в левый / правый столбцы

0

У меня есть ситуация, когда мне нужно иметь возможность принимать divs и плавать их либо в левый столбец, либо в правый столбец на основе ввода пользователем. Таким образом, я не контролирую порядок divs в DOM, то есть может быть 2 divs float left, за которыми следуют 5 divs float right, а затем 10 divs float left и т.д.

здесь пример

HTML

<div class="left" style="background-color:#D8D8D8;">aa</div>
<div class="right" style="background-color:#C4BD97;">bb</div>
<div class="right" style="background-color:#8DB3E2;">dd</div>
<div class="right" style="background-color:#E5B9B7;">ee</div>
<div class="full" style="background-color:#D7E3BC;">ff</div>
<div class="right" style="background-color:#CCC1D9;">gg</div>
<div class="left" style="background-color:#FBD5B5;">cc</div>
<div class="right" style="background-color:#D8D8D8;">hh</div>
<div class="right" style="background-color:#C4BD97;">ii</div>
<div class="right" style="background-color:#8DB3E2;">kk</div>
<div class="left" style="background-color:#E5B9B7;">ll</div>
<div class="full" style="background-color:#D7E3BC;">mm</div>
<div class="right" style="background-color:#CCC1D9;">nn</div>
<div class="left" style="background-color:#FBD5B5;">jj</div>

CSS

.left {float:left;clear:left;}
.right {float:right;clear:right;}
.full {float:none;clear:both;}

Здесь скрипка: http://jsfiddle.net/nNL2V

В этом примере я хотел бы свернуть пробел между ll и cc, чтобы он появился прямо внизу. Решение должно поддерживать IE8 и выше.

Я также должен добавить, что я подумал о том, чтобы использовать подход с плавающим столбцом с левым и правым div, но в моем случае это не сработает из-за полных разделителей ширины, используя clear: оба перемежаются между плавающими разделами.

psionicgames 23 окт. 2013, в 18:40

Источник

Теги:

html

css

2 ответа

Ещё вопросы

jbarnett · Answer 1 · 2013-10-23T15-31-00.000Z

1

Можете ли вы назначить width для .left? Если это так, вы можете сделать следующее:

.left {
    display: inline-block;
    width:50%;
}

.right {float:right; clear: right;}

скрипка

jbarnett 23 окт. 2013, в 15:31

0

Похоже, это может сработать. Я поиграю с этим в реальном приложении и посмотрю, что я придумаю. Благодарю.
psionicgames 23 окт. 2013, в 18:08
0

Я попробовал это с большим количеством DIV, и это не очень хорошо сочеталось с 100% DIV между ними.
Tim S 23 окт. 2013, в 18:25
0

Я полагаю, это будет работать до тех пор, пока вам не нужно будет указывать ширину 50% для ваших DIV справа. Если вы укажете правильную ширину, это может привести к изменению размера. Я обновляю свой ответ с пересмотренным подходом колонки без изменения размеров проблем.
Tim S 23 окт. 2013, в 18:35
0

На самом деле эта ситуация работает только в том случае, если правые элементы делятся раньше, чем левые, если у вас есть все левые элементы, то правые элементы всплывают только до уровня последнего левого элемента : jsfiddle.net/C4t4LystX/BsMbQ/3
psionicgames 24 окт. 2013, в 17:24

Показать ещё 2 комментария

Tim S · Answer 2 · 2013-10-23T13-37-00.000Z

Я не уверен, как вы это сделаете с помощью чистого CSS, но вовлеченный JQuery был бы тривиальным. Это в основном перемещение DIV в левые и правые плавающие контейнеры на основе их left или right класса.

Немного больше JQuery, и у вас есть столбцы, которые не подвержены тем же проблемам изменения размера, что и принятый ответ...

HTML

<div id="src">
    <div class="left" style="background-color:#D8D8D8;">aa</div>
    <div class="right" style="background-color:#C4BD97;">bb</div>
    <div class="right" style="background-color:#8DB3E2;">dd</div>
    <div class="right" style="background-color:#E5B9B7;">ee</div>
    <div class="full" style="background-color:#D7E3BC;">ff</div>
    <div class="right" style="background-color:#CCC1D9;">gg</div>
    <div class="left" style="background-color:#FBD5B5;">cc</div>
    <div class="right" style="background-color:#D8D8D8;">hh</div>
    <div class="right" style="background-color:#C4BD97;">ii</div>
    <div class="right" style="background-color:#8DB3E2;">kk</div>
    <div class="left" style="background-color:#E5B9B7;">ll</div>
    <div class="full" style="background-color:#D7E3BC;">mm</div>
    <div class="right" style="background-color:#CCC1D9;">nn</div>
    <div class="left" style="background-color:#FBD5B5;">jj</div>
</div>

<div style="clear:both;"></div>

<div id="dest"></div>

CSS

.left, .right { width:100%; }
.full { width:100%; clear:both; }
.leftCol { float:left; clear:left; width:50%; }
.rightCol { float:right; clear:right; width:50%; }

JS

var cleared = true;
var left;
var right;
$("#src>.left, #src>.right, #src>.full").each(function(){
    var el = $(this);
    if(el.hasClass("full")) {
        cleared = true;
        $("#dest").append(el);
    } else {
        if(cleared === true) {
            left = $("<div class='leftCol'></div>");
            right = $("<div class='rightCol'></div>");
            $("#dest").append(left).append(right);
            cleared = false;
        }
        if(el.hasClass("left")) {
            left.append(el);
        } else if(el.hasClass("right")) {
            right.append(el);
        }
    }
});

FIDDLE

http://jsfiddle.net/RcvHW/1/

Я думал о подходе с двумя столбцами, но в моем случае это не сработает, потому что между плавающими элементами также могут быть разделители шириной на всю ширину, которые будут очищаться: оба, а затем левый и правый столбцы продолжатся после. Я отредактирую вопрос и с этой информацией.
Итак, учитывая эту скрипку: jsfiddle.net/nNL2V , что вы хотите сделать, это свернуть пробел между плавающими div, которые появляются между divами полной ширины? (перемещение ll вправо под cc )
Да, это именно то, что я пытаюсь сделать
Я отредактировал вопрос, чтобы использовать вашу скрипку, чтобы лучше обрисовать проблему, спасибо.