Question

有一组浮动的div我如何垂直对齐它们，所以它们一起坐在一起，没有空格，在较短的div之下，即这里....

<!doctype html>
<html>    
    <head>
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .imadiv {
                border: 1px solid #FF0000;
                float: left;
                margin: 5px;
                padding: 10px;
                width: 200px;
            }
            #wrapper {
                width:800px;
                margin:0 auto;
            }
        </style>
        <title>Untitled Document</title>
    </head>

    <body>
        <div id="wrapper">
            <div id="one" class="imadiv">
                <p>div1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
            </div>
            <div id="two" class="imadiv">
                <p>div2</p>
                        <p>Lorem ipsum dolor sit amet, Nullam blandit.</p>
            </div>
            <div id="three" class="imadiv">
                <p>div3</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
            </div>
            <div id="four" class="imadiv">
                <p>div4
                    </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
            </div>
            <div id="five" class="imadiv">
                <p>div5
                    </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit. Donec risus ipsum, ultrices eget nibh et.</p>
            </div>
            <div id="six" class="imadiv">
                <p>div6
                    </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit. Donec risus ipsum, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et.</p>
            </div>
        </div>
        </div>
    </body>

</html>

http://jsfiddle.net/AK32q/4/

所以div5垂直对接div 2我确定它是Jquery但我找不到任何东西？

非常感谢

Answer 1

您可以在.imadiv点min-height .imadiv { border: 1px solid #FF0000; float: left; margin: 5px; padding: 10px; width: 200px; min-height:200px; } var $container = $('#wrapper'); // initialize $container.masonry({ columnWidth: 30, itemSelector: '.imadiv' }); var msnry = $container.data('masonry'); {{1}}

CSS：

{{1}}

这只是使它全部排列在相同的高度。我确定这不是你想要的。

但David DeSandro有一个插件，我使用他的砌体插件http://jsfiddle.net/AK32q/3/

在这里看到你的小插曲http://masonry.desandro.com/

Jquery的：

{{1}}

Answer 2

尝试在列表中提供<li><div id="#"></div></li>之类的div，这将解决您的问题。

Answer 3

仅对于顶行，重复底行。

var element = document.getElementById('one'),
    style = window.getComputedStyle(element),
    one = style.getPropertyValue('height');

var element = document.getElementById('two'),
    style2 = window.getComputedStyle(element),
    two = style2.getPropertyValue('height');

var element = document.getElementById('three'),
    style3 = window.getComputedStyle(element),
    three = style3.getPropertyValue('height');

one = parseInt(one);
two = parseInt(two);
three = parseInt(three);
var divmax = Math.max(one,two,three);
document.getElementById('one').innerHTML = divmax;
document.getElementById('one').style.height = divmax + "px";
document.getElementById('two').style.height = divmax + "px";
document.getElementById('three').style.height = divmax + "px";

FIDDLE DIDDLE

Answer 4

您不需要任何第三方框架/库。你可以用纯CSS做到这一点。您需要做的就是使用unordered lists和absolute positioning的组合。那会给你你想要的确切效果。

按照你提供的方式考虑html的结构，以下CSS应该为你做的诀窍：

* {
    margin: 0;
    padding:0;
}

ul {
    display:inline-block;
    list-style-type:none;
    margin:10px;
    width:30%;
    position:absolute;
}

ul.first {
    left:0%;
}

ul.second {
    left:33%;
}

ul.third {
    left:66%;
}

ul li {
    margin-bottom:10px;
    background-color:Orange;
    display:inline-block;
}

您可以在此处看到：http://jsfiddle.net/3s4Xj/1/

这是您想要的非常简单的布局。我建议使用纯CSS而不是任何第三方库。

希望这有帮助!!!

浮动时垂直对齐div

4 个答案: