Question

所以，我有一行内联元素可以根据窗口的宽度进行调整，例如：

[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具有优先权。

Answer 1

如何使用这样的“破碎机”容器？

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

在具有未知数量的子元素“框”的Container元素上调用betterBreak('#container')将动态地将子项包装在2 breaker个div中，当前行为2行时，该行将行拆分为所需的布局

调整后的演示：http://jsfiddle.net/pyU67/8/

Answer 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中失败:(

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

<强> Example

Answer 4

我打开CSS或jquery。 - @Surgery

使用Javascript / jQuery回答

我创建了一个小提琴，它创建了一个镜像HTML，表示当元素向下移动时会发生什么。

以下是图片示例：

Demo fiddle

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

Answer 5

使用flex container和flex-wrap：wrap-reverse：

doInBackground

CSS反向内联流程

5 个答案:

Demo fiddle