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無法正確加載

回答

相關問題