Question

所以我目前正在尝试在文字和图片下方添加水平线规则，但是，当我将<hr />放在结束div标签下方时，它只显示在文本下方而不是两者之下。我将添加我的代码，以便您可以看到我到目前为止所做的工作！

<div class ="services-homepage">
    <img src="http://dev.southlandautomation.com/skin/frontend/boilerplate/southlandautomation/images/automation1.jpg"  style="float:left "/>

    <h4>Southland Automation specializes in industrial automation sales, service, and repairs. Southland delivers world-class motor control support for electrical support for equipment including drives, soft starts, and PLC. Southland also houses a full repair facility with capabilities to repair obsolete and legacy devices.</h4 style="float:right">
</div>
<hr />

Answer 1

问题是图片代码的float:left，您需要稍后在同一元素中使用<div style="clear:left"></div>将其清除，以阻止其过度浮动：

<div class="services-homepage">
  <img src="http://dev.southlandautomation.com/skin/frontend/boilerplate/southlandautomation/images/automation1.jpg" style="float:left; margin-right: 10px" />

  <h4>Southland Automation specializes in industrial automation sales, service, and repairs. Southland delivers world-class motor control support for electrical support for equipment including drives, soft starts, and PLC. Southland also houses a full repair facility with capabilities to repair obsolete and legacy devices.</h4>
  <div style="clear:left"></div>
</div>
<hr />

Answer 2

如果您将style="clear: both;添加到hr，则会阻止水平规则显示在浮动图片的右侧。

<hr style="clear: both;" />

我还注意到你为结束</h4 style="...">添加了一个样式属性。这是无效的HTML。

Answer 3

这里的其他两个答案都很好，但我想添加一些旋转和单独的解决方案，以防浮动因为某些奇怪的原因确实需要存在。

请考虑以下事项：

.services-homepage{
   display:inline-block;
   width:100%;
}

这对你也有用。 ;）

请参阅DEMO此处

Answer 4

我更喜欢使用CSS边框而不是水平规则。

您可以将border-bottom应用于包装div。即：

<style type="text.css">

div.services-homepage {
    border-bottom: 2px solid green;
}

</style>

以下是一个示例：https://jsfiddle.net/o3ze26yy/

Answer 5

您可以尝试此操作，而无需在页面中添加额外元素：

.services-homepage:after {
  content: "";
  display: table;
  clear: both;
}

<div class="services-homepage">
  <img src="http://dev.southlandautomation.com/skin/frontend/boilerplate/southlandautomation/images/automation1.jpg" style="float:left " />

  <h4>Southland Automation specializes in industrial automation sales, service, and repairs. Southland delivers world-class motor control support for electrical support for equipment including drives, soft starts, and PLC. Southland also houses a full repair facility with capabilities to repair obsolete and legacy devices.</h4>

</div>
<hr />

文本和图像下面的水平规则

5 个答案: