Question

下面的代码可以在这个小提琴中查看：http://jsfiddle.net/VgG55/10/

我有以下标记，其中div按以下顺序放置：

<div class="wrapper">
    <div class="wide">Prio 1</div>
    <div class="narrow">Prio 2</div>
    <div class="narrow">Prio 3</div>
    <div class="narrow">Prio 4</div>
    <div class="narrow">Prio 5</div>
    <div class="narrow">Prio 6</div>
    <div class="wide">Prio 7
        <br/>The divs can vary in height.
        <br/>So, the height must be able to change.</div>
    <div class="wide">Prio 8</div>
    <div class="wide">Prio 9</div>
    <div class="wide">Prio 10</div>
    <div class="narrow">Prio 11</div>
    <div class="wide">Prio 12</div>
</div>

我希望将“宽”div放在左边，将“narrow”div放在右边。 div的高度可能会有所不同。

以下CSS用作开头（但可能会更改）：

.wide {
    background: gray;
    float: left;
    clear: left;
    width: 80%;
}

.narrow {
    background: green;
    float: right;
    clear: right;
    width: 20%;
}

由于垂直（在“宽”和“窄”两侧）div之间存在大的空白空间，因此无法获得所需的结果结果。

如何垂直对齐div（没有空格）？ “prio”div的顺序必须在文档中保持不变，但我可以更改CSS并插入额外的div（包装等）。

最后需要注意的是，不需要JS解决方案。

Answer 1

jsFiddle：http://jsfiddle.net/VgG55/7/

以下是解决问题的另一种方法。

<强> HTML：

<div class="grid">
    <div class="wide">
        <div>Prio 1</div>
        <div>Prio 4</div>
        <div>Prio 5</div>
        <div>Prio 6</div>
        <div>Prio 7</div>
    </div>
    <div class="narrow">
        <div>Prio 2</div>
        <div>Prio 3</div>
        <div>Prio 3</div>
    </div>
</div>

<强> CSS：

.grid {
    overflow: hidden;
    background-color: gray;
}

.wide {
    background: blue;
    float: left;
    clear: left;
    width: 80%;
}

.narrow {
    background: green;
    float: right;
    clear: right;
    width: 20%;
}

Answer 2

这不可能使用float，但你可以尝试使用javascript砌体插件，如：

http://masonry.desandro.com/或http://isotope.metafizzy.co/

希望有所帮助！

Answer 3

如果您可以使用div，则可以执行此类操作。

HTML

<div class="wrapper">
   <div class="wide">Prio 1</div>
   <div class="wide">Prio 2</div>
   <div class="wide">Prio 3</div>
   <div class="wide">Prio 4</div>
   <div class="wide">Prio 5</div>
   <div class="narrow">Prio 6</div>
   <div class="narrow">Prio 7</div>
   <div class="narrow">Prio 8</div>
</div>

CSS

* {
   margin: 0;
   padding: 0;
}
.wide {
    background: gray;
    float: left;
    width: 80%;
}

.narrow {
    background: green;
    width: 20%;
    margin-left: 80%;
}

Answer 4

对于大小相等的盒子

使用inline-block，但不 float，wide类

.wide {
  background: gray;
  display:inline-block;
  width: 80%;
}

Demo

对于可变大小的盒子

上面的方法不适用于不同高度的盒子，因为浮动元素试图保持原始行的高度或其他东西。

我设法使用flex-box：

将一些丑陋但功能强大的东西混在一起

.wrapper {
  display:flex;
  flex-direction:column;
  /* adjust for the relative re-positioning
     from the hack, below */
  margin-bottom:-150px; 
}
.wide {
  order:0; /* re-order the wide elements to the "start", i.e. top */
  width:79%; /* this could be done with flex:xxx */
}
.narrow {
  order:1; /* re-order the narrows to the "end" */
  align-self:flex-end; /* moves the narrows to the right */
  width:20%; /* again this could be flex:xxx */
  /* the awful hack: */
  position:relative;
  top:-150px; /* magic number: trial and error required */
}

Flexbox应该能够进行2列堆栈。不幸的是它是not yet supported in Firefox（看起来它应该是在第28版，所以3月中旬可能）。此外，我无法让它在Chrome中小提琴。

Demo

如何让浮动div与顶部对齐？

4 个答案:

对于大小相等的盒子

对于可变大小的盒子