2

似乎在某个地方的 div 上设置了“最大宽度”（或具有类似效果的东西），但据我所知，没有。然而，容器的底部会像这样溢出底部边缘：

在此处输入图像描述

为什么会这样做，我该如何防止呢？

更新

这里发生的是 html5 部分元素被动态地（以编程方式，通过 jQuery）添加到选项卡的内容区域。一些相关的代码：

HTML：

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Books">Books</a></li>
        <li><a href="#tab-Movies">Movies</a></li>
        <li><a href="#tab-Music">Music</a></li>
    </ul>
    <div id="tab-Books">
        <select id="bookDropDown">
            <option value="Pulitzer">Pulitzer</option>
            <option value="NBCC">National Book Critics Circle</option>
            <option value="NBA">National Book Awards</option>
            <option value="Nobel">Nobel</option>
        </select>
        <div id="BooksContent"></div>
    </div>

CSS：

.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

.wrapper{
    float: left;
    width: 400px;
    margin-left:20px;
    padding-bottom:20px;
}

jQuery：

$('#BooksContent').html('');
var htmlBuilder = '';

$.getJSON('Content/NBCCJr.json', function (data) {
    $.each(data, function (i, dataPoint) {
        if (IsYear(dataPoint.category)) {
            htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
        } else { 
            htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
. . .
            htmlBuilder += '</section>';                   
        }
    }); //each
    $('#BooksContent').append(htmlBuilder)
        .find('img').error(function() {
            this.src = "Content/NoImageAvailable.png"
        });
    $('#BooksContent').css('background-color', 'black');
    $('button').button();
}); //getJSONNBCCJr
$largest = 0;
$(".wrapper").each(function () {
    if ($(this).height() > $largest) {
        $largest = $(this).height();
    }
});
$(".wrapper").css("height", $largest);

} // getNatlBookCritics()

更新 2

好的，我将所有 CSS 添加到我的样式表中，然后更改了内容区域的 HTML，如下所示：

<div id="BooksContent" class="clearfix"></div>

...而且，感谢 Matthew R.，它就像 cha[mp,rm] - 谢谢！

有趣的是，我看到 asp.net 项目使用这个 CSS 实现了类似的部分实现：

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
4

1 回答 1

1

您的列表可能无法正确清除。如果您有很多浮动元素，这可能会导致渲染错误。当您浮动一个元素时，您正在使该元素“失去流动”。基本上，该元素将忽略其在 DOM 中的位置，并尝试滑动到您在浮动中设置的一侧。如果包装器内的所有子元素都是浮动的，则父元素不再知道它应该有多高（因为所有元素都没有流动），并且它将自己设置为 0px 高度或最高的流入元素的高度。要解决此问题，您需要clearfix。这将告诉浏览器使容器清除其子项。

于 2013-07-21T14:13:42.763 回答