3

我有这样的情况： http: //jsfiddle.net/HKHS3/ 问题是如何让divs 出现一行又一行，其中一行中div的所有 s 具有相同的高度，这取决于最高的实际内容？

因此，根据body's 的宽度，div一行中的 s 数量会有所不同，但每次 div行结束后的右侧应该有点清晰浮动并开始新行。

4

3 回答 3

8

每行固定数量

您可以通过创建一个row类型div来包装您的内部div元素来做到这一点。

首先，您需要重组 HTML，如下所示：

<div class="row">
    <div>abc</div>
    <div>adb djhf kdfhv fkjsh vhf jhds fjhf jh fjhf jh fdjh dh</div>
    <div>dhfjgh jfh gkjhfde jghf jgh jfdh gjfhd gjfdhg jfhd gjdhf jhg djhg jdh gjhfd</div>
</div>

（您可以根据需要添加更多这样的行）

然后下面的css应该做你需要的：

.row {
    display:table-row;
}

.row > div {
    width: 100px;
    display:inline-block;
    vertical-align:top;
    border: 1px solid black;
    margin: 5px;
    height:100%;
}

这是您更新的示例

每行动态数（不完美）

上述方法的问题在于它要求div每行有固定数量的元素。如果您希望它是动态的并且可以换行，那么仅使用 CSS 就会遇到问题。最接近它的方法如下：

div {
    width: 100px;
    display:inline-block;
    vertical-align:top;
    margin: 5px;
}

但是元素并不都有相同的高度，只是没有边框你无法分辨。因此，添加border或background-color任何其他显示元素高度的样式都会破坏效果。

这是一个例子

完全按照要求（需要 javascript）

值得一提的是，您想要的效果使用 javascript 是可行的。我不会包含这样的示例，因为实际实现将在很大程度上取决于您的真实 HTML 的设置方式。

实际上，我快速了解了 javascript 方法，但它使用了 JQuery，并且可能也可以进行优化：

function updateHeights() {
    var maxHeight = 0, lastY = 0, rowDivs = [], allDivs = $("div"), count = allDivs.length;

    allDivs.each(function (i) {
        var div = $(this), offset = div.offset(), y = offset.top, x = offset.left, h = div.height();

        if (h > maxHeight) maxHeight = h;//store the highest value for this row so far
        if (lastY == 0) lastY = y;//get the y position if this is the first element

        //if new row
        if (y > lastY) {
            resizeElements(rowDivs, maxHeight);//resize all elements on this row
            rowDivs.length = 0;//reset the array of row elements, ready for next row
            maxHeight = h;//set maxHeight to first of new row
        }

        lastY = y;//store current y posible for checking if we have a new row or not
        rowDivs.push(div);//add current element to row collection

        //check if last item, is so then resize this last row
        if(count - 1 == i)
            resizeElements(rowDivs, maxHeight);
    });
}

function resizeElements(elements, height) {
    for (var i = 0; i < elements.length; i++) {
        $(elements[i]).height(height);
    }
}

$(window).resize(function () {
    updateHeights();
});
updateHeights();

这是一个工作示例

于 2013-05-02T09:02:43.043 回答
0

使用 jQuery 非常简单。对于同一行中的所有 div 给出单个类。让我们在我的示例中说“相同高度”。然后使用这个 jQuery。

$(document).ready(function(){
    var maxHeight = 0;

    $(".sameheight").each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });

    $(".sameheight").height(maxHeight);

});

对于多行，使用不同的类重复代码。希望这可以解决您的问题。

于 2013-06-17T05:13:57.237 回答
0

尝试这个

   <script type="text/javascript">
    $(document).ready(function () {
        var maxHeight = 0;
        $('div').each(function () {
            var this_div = $(this);
            if (maxHeight < this_div.height()) {
                maxHeight = this_div.height();
            }
        })

        $('div').css({ 'height': maxHeight.toString() });
    })
</script>
于 2013-06-17T05:55:56.893 回答