div无法正确加载

已解决！滚动到这个问题的结尾！div无法正确加载

正如你可以看到here：

我做了一个页面的显示所有的配乐此网站的约，但是当我加载它，不显示创建的行div中的div正确的，直到你悬停其中一个divs，而不是特定的看起来像它必须。我不希望我的访问者必须了解他们如何修复它，这只是令人烦恼，所以应该怎么做。

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

感谢名单，以hungerstar

来源

2013-07-15 Axel Köhler

添加您CSS还请！ – hungerstar

我无法加载您的示例页面 – Huangism

您是否尝试将'float：left'添加到div？ – Pieter

要获得每张图片的红色，请从.track删除display: inline;。或者，如果你连续不断地按照Pieter的建议，将float: left;添加到.track。如果您希望下面的所有曲目一起“下推”，则必须将其中一些DIFF包装到另一个DIV中，并确保包含DIV的DIV有clear: left;，因此它将启动一个新行。

ADD

.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-15 19:53:07 hungerstar

呃... http：//kerstlichtshow.hostingsiteforfree.com/tracks2.html –

确保你每行的容器DIV上都有'clear：left;'。否则，他们都希望形成一排，并且只有在到达容器边缘时才会断开。 – hungerstar

Thanx！这工作。 –

添加float: left到的div track类。

来源

2013-07-15 19:52:33 Pieter

如果我这样做，那么它不会再显示在行中，所以不能在彼此旁边显示。 –

div无法正确加载

回答

相关问题