Question

我一直在尝试编写自定义CSS，用于相关帖子的样式，这些帖子出现在我网站的每篇文章下面。每个相关帖子由1个缩略图和1个文本标题组成。

每个页面下共有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 &ndash; 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 &ndash; 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 {
	clear: both;
	margin: 10px 0;
}
div.crp_related h3 {
	margin: 0 !important;
}
div.crp_related ul {
	list-style: none;
	float: left;
	margin: 0 !important;
	padding: 0 !important;
}
div.crp_related li, div.crp_related a {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: left;
display: table-cell;
}
div.crp_related li {
	margin: 5px !important;
	padding: 6px;
}
div.crp_related li:hover {
	background: #eee;
}
div.crp_related a:hover {
	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 {
	position: relative;
max-width: 150px;
	height: 100%;
	padding-left: 0px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
	color: #dc291e;
	font-size: 12pt;
font-weight: bold;
}

div.crp_related .crp_thumb, div.crp_related li, div.crp_related .crp_title {
	vertical-align: bottom;

}
.crp_clear {
	clear: both;
}

为什么会这样？我做错了什么？

Answer 1

每四个记录后添加以下div。

<div style='clear:both'></div>

Answer 2

请一起发布一段包含CSS和HTML的代码。

1）可能问题在于，在第一行中，前两篇文章的crp_title较长，跨越4行，但在另外两篇文章中，crp_title跨越3行。
进入新行的浮动元素试图上升，这就是第二篇文章的原因。右边的行是第一行的第3和第4篇文章的高度较小。
您可以使用浏览器检查器轻松检查它。

2）清除：在每行的最后一个元素之后

快速修复可以在.crp_title

的px中设置固定高度

Answer 3

此问题是由于浮动内容的高度不等，因此您需要清除float并获取新行的下一个元素。您可以使用nth-child选择器执行此操作。

＆＃13;

div.crp_related {
  clear: both;
  margin: 10px 0;
}
div.crp_related h3 {
  margin: 0 !important;
}
div.crp_related ul {
  list-style: none;
  float: left;
  margin: 0 !important;
  padding: 0 !important;
}
div.crp_related li,
div.crp_related a {
  float: left;
  overflow: hidden;
  position: relative;
  text-align: left;
  display: table-cell;
}
div.crp_related li {
  margin: 5px !important;
  padding: 6px;
}
div.crp_related li:hover {
  background: #eee;
}
div.crp_related a:hover {
  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 {
  position: relative;
  max-width: 150px;
  height: 100%;
  padding-left: 0px;
  padding-right: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #dc291e;
  font-size: 12pt;
  font-weight: bold;
}
div.crp_related .crp_thumb,
div.crp_related li,
div.crp_related .crp_title {
  vertical-align: bottom;
}
.crp_clear {
  clear: both;
}
/* THIS IS DUE TO UNEQUAL HEIGHT OF FLOATED CONTENT, so Clear Float on every 5th element */

@media (min-width: 768px) {
  div.crp_related li:nth-child(4n+1) {
    clear: both;
  }
}
@media (max-width: 767px) {
  div.crp_related li:nth-child(3n+1) {
    clear: both;
  }

＆＃13;

<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 &ndash; 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 &ndash; 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>

＆＃13;

Answer 4

这应该可以解决问题：

div.crp_related > ul > li:nth-child(4):after {
  content: '';
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

Answer 5

我认为它的编码非常简单。看一下这个片段：

＆＃13;

ul li {
		width: 200px;
		height: 200px;
		border: 1px solid #000;
		float: left;
		list-style: none;
		margin-top: 40px;
		margin-right: 40px;
	}
	
	ul li:last-child {
		margin-right: 0;
	}

＆＃13;

<ul>
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

＆＃13;

这是基础，现在您可以添加图像和描述。这个ul适合容器的宽度。希望它有所帮助

CSS Float Left Inconsistencies元素随机跳转行

5 个答案: