如何获得浮动divs对齐顶部？ [英] How to get floated divs align to the top?

问题描述

下面的代码可以在这个小提琴中查看： 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 /> div的高度可能会有所不同。 
< br />因此，高度必须能够改变。< / 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放在左边，将窄div放在右边。

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

  .wide {
 background：grey; 
 float：left; 
 clear：left; 
宽度：80％; 
} 
 
 .narrow {
 background：green; 
 float：right; 
明确：正确; 
 width：20％; 
 
 $ / code> 

由于div之间有很大的空白空间垂直（宽和窄侧）。

如何垂直对齐div（无空格）？ priodiv的顺序必须保持完整，但我可以更改CSS并插入额外的div（包装等）。

$ b

最后说明一下，我们需要一个无JS的解决方案。

解决方案

使用float这是不可能的，但您可以尝试使用JavaScript砌体插件，如：

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

希望有所帮助！

The code below can be viewed in this fiddle: http://jsfiddle.net/VgG55/10/

I have the following markup where the divs are placed in the following order:

<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>

I wish to place the "wide" divs to the left and the "narrow" divs to the right. The height of the divs may vary.

The following CSS is used as a start (but may be changed):

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

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

The desired result result is not achieved since there are large empty spaces between the divs vertically (both for the "wide" and "narrow" side).

How can I align the divs vertically (without space)? The order of the "prio" divs must stay intact in the document but I am allowed to change the CSS and insert extra divs (wrappers etc).

As a final note, a no-JS solution is required.

解决方案

This is not possible using float, but you can try to use a javascript masonry plugin like:

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

hope that helps!

这篇关于如何获得浮动divs对齐顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！