0

SOLVED!!! SCROLL TO END OF THIS QUESTION!

As you can see here:

I've made a page with all the soundtracks of the show this website's about, but when I load it, the divs in the div that create the rows aren't displayed correctly until you hover one of that divs, than that particular one looks like it has to. I don't want that my visitors have to find out how they fix it and it's just irritating, so what to do about it.

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>

Solved! added

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

4

2 回答 2

0

使用 class添加float: left到 div 中track。

于 2013-07-15T19:52:33.953 回答
0

要获得每个图像周围的红色，请display: inline;从.track. 或者，如果您希望它们连续执行 Pieter 的建议并添加float: left;到.track. 如果您希望下面的所有曲目“下推”在一起，则必须将一些.trackDIV 包装在另一个 DIV 中，并确保包含的 DIV 已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>
于 2013-07-15T19:53:07.870 回答