0
我一直在試圖編寫自定義的CSS樣式的相關職位，出現在我的網站的每篇文章下。每個相關文章由1個縮略圖和1個文字標題組成。CSS浮動左不一致元素隨機跳行
每個頁面下共有8個分組在UL列表中，LI元素浮動到左側，因此它們顯示在2行中。
問題是由於某些原因，偶爾我有LI項目，現在明顯的原因跳行。
下面是一個例子： Screenshot
這是代碼的HTML部分：
<div class="crp_related ">
<h3>Related Stories:</h3>
<ul>
<li style="padding-top: 10px">
<a href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Document reveals ISIS plot for world domination in chilling detail: Full translation below" alt="Document reveals ISIS plot for world domination in chilling detail: Full translation below"
src="./wp-content/uploads/2015/12/Screen-Shot-2015-12-07-at-12.45.19-PM-150x150.png">
</a>
<br>
<a class="crp_title" href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">Document reveals ISIS plot for world domination in chilling…</a>
</li>
<li style="padding-top: 10px">
<a href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out"
alt="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out" src="./wp-content/uploads/2015/12/farook1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">‘Devout’ US Muslim and his Saudi wife left their</a>
</li>
<li style="padding-top: 10px">
<a href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’" alt="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’"
src="./wp-content/uploads/2015/12/Obama126-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">Obama: ‘We Lose’ When America Scrutinizes…</a>
</li>
<li style="padding-top: 10px">
<a href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS" alt="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS"
src="./wp-content/uploads/2015/12/565f3967c461884a3d8b4627-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">‘Great partners’: Pentagon rejects Russian…</a>
</li>
<li style="padding-top: 10px">
<a href="./7-isis-facts-every-american-must-know/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="7 ISIS Facts Every American Must Know" alt="7 ISIS Facts Every American Must Know" src="./wp-content/uploads/2015/12/ISIS-Genocide-in-Iraq-AP-Photo-640x480.jpg">
</a>
<br>
<a class="crp_title" href="./7-isis-facts-every-american-must-know/">7 ISIS Facts Every American Must Know</a>
</li>
<li style="padding-top: 10px">
<a href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI"
alt="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI" src="./wp-content/uploads/2015/12/120515_2259_WillYourCit1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">Will Your City or State be the Next San Bernardino? At Least</a>
</li>
<li style="padding-top: 10px">
<a href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’" alt="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’"
src="./wp-content/uploads/2015/12/56600a0dc46188c3078b45e7-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">‘Allah took their sanity’: Putin accuses Turkish…</a>
</li>
<li style="padding-top: 10px">
<a href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week" alt="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week"
src="./wp-content/uploads/2015/12/1028392998-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over…</a>
</li>
</ul>
<div class="crp_clear">
</div>
</div>這是CSS部分：
div.crp_related {
\t clear: both;
\t margin: 10px 0;
}
div.crp_related h3 {
\t margin: 0 !important;
}
div.crp_related ul {
\t list-style: none;
\t float: left;
\t margin: 0 !important;
\t padding: 0 !important;
}
div.crp_related li, div.crp_related a {
\t float: left;
\t overflow: hidden;
\t position: relative;
\t text-align: left;
display: table-cell;
}
div.crp_related li {
\t margin: 5px !important;
\t padding: 6px;
}
div.crp_related li:hover {
\t background: #eee;
}
div.crp_related a:hover {
\t text-decoration: none;
}
div.crp_related img {
max-width: 150px;
max-height: 150px;
min-height: 150px;
min-width: 150px;
margin: auto;
display: block;
overflow: hidden;
}
div.crp_related .crp_title {
\t position: relative;
max-width: 150px;
\t height: 100%;
\t padding-left: 0px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
\t color: #dc291e;
\t font-size: 12pt;
font-weight: bold;
}
div.crp_related .crp_thumb, div.crp_related li, div.crp_related .crp_title {
\t vertical-align: bottom;
}
.crp_clear {
\t clear: both;
}這是怎麼發生的？ 我在做什麼錯？
您必須需要添加一個樣式清晰的div：在每第四個記錄之後 – devpro
devpro說什麼或者設置一個高度，因爲不同的高度通常與浮動相混淆。 – AlexG
不要像這樣編寫浮動塊和clearfix，這是做這件事的正確方法。浮動是爲浮動元素，而不是佈局。如果用'display：inline-block'更改所有'float：left'，問題就會消失，不會出現奇怪的清除修正。 –