时间戳

首页 > 解决方案 > CSS HR在div切割？

html - CSS HR在div切割？

问题描述

我想知道是否有可能阻止 HR 元素不剪切而只是跳到 div 标签停止时。

标签只是一个简单的 <hr>

这是我的完整代码：https ://jsfiddle.net/6bk5c7xn/

谢谢！

标签： htmlcss

解决方案

由于div您所指的元素（应该“跳过”，如果我理解正确的话）是浮动的，您可以将其添加clear: both为 CSS 规则hr，这将把它放在代码中出现在它之前的所有浮动元素的下方：

.boxed {
  border: 1px solid green;
  width: 30%;
  float: left;
  margin: 20px;
}

fact {
  font-family: verdana;
  font-size: 13px;
  color: "gray";
}

fact.q {
  font-weight: bold;
}

fact.l {
  text-decoration: underline;
}
hr {
  clear: both;
}
.
<div class="boxed">
  <div style="background:#C0C0C0;">
    <smalltitle>Facts</smalltitle>
    <br>
    <br>
    <fact class="q">Primary use: </fact>
    <fact>making eggs</fact><br>
    <fact class="q">Egg/chicken (annual): </fact>
    <fact>100</fact><br>
    <fact class="q">Egg size: </fact>
    <fact class="l"></fact>mall - p</fact><br>
    <fact class="q">Temperament: </fact>
    <fact>Calm, Friendly</fact><br>
    <fact class="q">Recognized variety: </fact>
    <fact class="l"><a onclick="alert('Recognized variety:\n\nBearded Black, Bearded Blue, Bearded Buff, Bearded Gray, Bearded Partridge, Bearded Splash, Bearded White, Non-Bearded Black, Non-Bearded Blue, Non-Bearded Buff, Non-Bearded Gray.')">Detail</a></fact><br>
    <fact class="q">Egg color: </fact>
    <fact>Cream, Tinted</fact><br>


    <br>
  </div>
</div>
<div name="wikipediaStatment" class="divSector">
  <smalltitle>Wikipedia statement</smalltitle>
  <br><br>
  <downP>The Silkie is a breed of chicken named for its atypically fluffy plumage, which is said to feel like silk and satin. The breed has several other unusual qualities, such as black skin and bones, blue earlobes, and five toes on each foot, whereas most
    chickens only have four.</downP>
</div>
<br>

<hr class="solid">

<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum

PS：请注意，我只是将您的 JS 小提琴中的代码复制到此处的一个片段中（然后添加了我写的 CSS 规则） - 如果可能的话，您应该将代码作为片段添加到问题中，而不是链接到外部像 JS fiddle 这样的资源。

推荐阅读