Question

解决!!!滚动到这个问题结束！

正如您所见here：

我已经制作了一个包含本网站所有节目配乐的页面，但是当我加载它时，创建行的div中的div不能正确显示，直到你悬停其中一个div，而不是特别是看起来像它必须。我不希望我的访问者必须弄清楚他们是如何修复它的，这只是令人恼火，所以该怎么做。

DOM：

<body>
    <div> <!--row wrapper-->
        <div class="track"> <!--track information-->
            <img src="" />        <!--album cover-->
            <h3></h3>             <!--artist-->
            <p></p>               <!--title-->
        </div> <!--/track information-->
    </div> <!--/row wrapper-->

    <div> <!--row wrapper-->
        <div class="track"> <!--track information-->
            <img src="" />        <!--album cover-->
            <h3></h3>             <!--artist-->
            <p></p>               <!--title-->
        </div> <!--/track information-->
    </div> <!--/row wrapper-->

    ...
</body>

JS（jQuery）：

$(document).ready(function() {
        $('div.track').mouseenter(function() {
            $(this).stop();                 //stop previous animation
            $(this).animate({height:'250'});   //expand, so title and artist will be visible.
        });
        $('div.track').mouseleave(function() {
            $(this).stop();                 //stop previous animation
            $(this).animate({height:'160px'}); //enlarge the div to it's original size
        });
    });

的CSS：

<style>
    .track{
        vertical-align:top;
        margin-right: 26px;
        background-color: #a90000;
        padding: 10px;
        width: 160px;
        height: 160px;
        overflow: hidden;
        border-radius: 6px;
        color: #fff;
        cursor: default;
        margin-bottom: 20px;
        display: inline;
    }
</style>

解决！加入

的CSS：

.track {
     float: left;
}
.row{
     clear: left;
}

HTML：

<div class="row">
     <div class="track"></div>
     <div class="track"></div>
     <div class="track"></div>
     <div class="track"></div>
     <div class="track"></div>
</div>

result

Thanx到hungerstar

Answer 1

将float: left添加到类track的div。

Answer 2

要在每张图片周围显示红色，请从display: inline;移除.track。或者，如果你连续玩它们，请按照Pieter的建议进行操作，并将float: left;添加到.track。如果你想让下面的所有曲目“下推”在一起，你必须将你的一些.track DIV包装在另一个DIV中，并确保包含DIV的{D}有clear: left;所以它将开始新的一行。

添加

.track { float: left; }

对于包含DIV的内容，请添加.row。
类
.row{ clear: left; }

和您的HTML

<div class="row"> <div class="track"></div> <div class="track"></div> <div class="track"></div> <div class="track"></div> <div class="track"></div> </div>

div没有正确加载

2 个答案: