CSS Обратный поточный поток

Итак, у меня есть строка встроенных элементов, которая настраивается на основе ширины окна, например, так:

[a][b][c][d][e] -- 1000px

[a][b][c]
[d][e]          -- 600px

Это имеет смысл, и это то, что ожидается от встроенных элементов. Однако я хочу знать, можно ли это сделать:

[d][e]  
[a][b][c]

или даже

[a][b]
[c][d][e]

Причина, по которой я хочу это, состоит в том, что у меня есть контент ниже строки встроенных элементов, и когда он разбивается на две строки, верхняя строка будет шире, чем нижняя строка выглядит очень плохо.
Спасибо.

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

Примечания:
Ширина окна, ширина элемента и количество элементов являются динамическими. Он должен работать в IE9 + и FF24 +, если это невозможно. FF имеет приоритет.

Ответы

Ответ 1

Как использовать контейнер "breaker"?

<div id="container">
    <div class="breaker">
        <div class="box">Box 1 Bigger</div>
        <div class="box">Box 2</div>
    </div>
    <div class="breaker">
        <div class="box">Box 3 Random</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5 Stuff</div>
    </div>
</div>

И этот CSS:

.breaker { display: inline-block; }
.box { 
    display: inline-block;
    vertical-align: top;
}

Это сломает [a][b][c][d][e] в

[a][b]
[c][d][e]

Теперь, чтобы учесть динамическое число ящиков и ширины, вам нужно использовать Javascript. С помощью jQuery вы можете сделать это следующим образом:

function betterBreak(container) {
    var boxes = $(container).children(),
        sum = 0, max = 0;
    boxes.map(function(x, box) { max += $(box).outerWidth(); });
    boxes.each(function(x, box) {  
        sum += $(box).outerWidth();
        if(sum > max/2) {
            var breakerBig = $('<div class="breaker"></div>'),
                breakerSmall = $('<div class="breaker"></div>');
            boxes.slice(x).appendTo(breakerBig);
            boxes.slice(0,x).appendTo(breakerSmall);
            $(container).append(breakerSmall).append(breakerBig);
           return false;
        }
    });
}

Вызов betterBreak('#container') элемента Container, который имеет неизвестное число дочерних элементов, "коробки" будет динамически обертывать дочерние элементы в 2 breaker divs, которые разделяют строку на желаемый макет при переходе на 2 строки.

Скорректированная демонстрация: http://jsfiddle.net/pyU67/8/

Ответ 2

Вы можете использовать режим записи, как я прокомментировал, но для более молодого браузера Firefox выглядит вне: http://codepen.io/gc-nomade/pen/DCqLb/ 

body {
  counter-reset: boxe;/* demo purpose */
/* reverse flow from bottom to top */
  writing-mode:lr-bt;
  -webkit-writing-mode: horizontal-bt;
  -moz-writing-mode: horizontal-bt;/* fails */
  -o-writing-mode: horizontal-bt;
  writing-mode: horizontal-bt;
}
/* demo purpsose */
b {
  display:inline-block;
  line-height:3em;
  width:8em;
  text-align:center;
  background:lime;
  border-radius:1em;
  margin:1em;
}
b:before {  
  counter-increment:boxe;
  content:counter(boxe) ' ';
}

Использование HTML в теле

<b> inline-box </b>
<b> inline-box </b> <!-- and so many more -->

Из вашей скрипки: http://jsfiddle.net/6Hm4C/3/ или просто пробелы http://jsfiddle.net/6Hm4C/4/

Для тестирования в IE, Safari, Opera, Chrome и сбоях в FF: (

Ответ 3

Вы можете попробовать добавить разделитель следующим образом:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="divider"></div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>

и используйте экран мультимедиа:

.divider { display: none; }
@media screen and (max-width: 600px) {
    .divider {
        clear: both;
        display: block;
    }
}

Пример

Ответ 4

Я открыт для CSS или jquery. - @Surgery

Ответ с использованием Javascript/jQuery

Я создал скрипт, который создает зеркальный HTML-код того, что происходит, когда элементы смещаются вниз.

Вот пример изображения:

Image example

Демо-скрипт

HTML

<div id="first">
    <div class="inp">aaaa</div>
    <div class="inp">b</div>
    .
    .
</div>

<!-- Below part to generate mirror code of the above -->
<div id="wrap">
    <div id="second">
    </div>
</div>

Javascript/jQuery

var actual = $('#first');
var mirror = $('#second');

$('#wrap').css({'top':''+actual.offset().top+'px'});
$(window).resize(function(){
    var frag = document.createDocumentFragment();
    var ele='div';
    var wrp = actual.height()+actual.offset().top;
    $('#first .inp').each(function(){
        var creEle = document.createElement(ele);
        creEle.className="inp";
        creEle.innerHTML = $(this).html();
        creEle.style.position = "absolute";
        var diff = wrp - ($(this).height()+$(this).offset().top);
        creEle.style.top = diff+"px";
        creEle.style.left = $(this).offset().left-actual.offset().left+"px";
        frag.appendChild(creEle);
    });
    mirror.html(frag);
});

$(window).trigger('resize');

CSS

html,body,#first,#second{
    width:100%;
    height:auto;
}
#first{
    visibility:hidden;
}
#wrap{
    position:absolute;
}
#second{
    position:relative;
}
.inp{
    display:inline-block;
    border:1px solid black;
    margin-right:3px;
}

Ответ 5

Используйте flex container с помощью flex-wrap: wrap-reverse:

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  align-items: flex-start;  
  align-content: flex-end; // or flex-start
}