我该怎么强迫一个＆lt; p>或者＆lt; h2＆gt;不流动？

Question

我不确定标题是否使用准确的术语; HTML不是我的强项。我正在尝试创建一个WordPress页面，并避免使用表来完成我想要的。我有几个部分，每个部分都有一个相关的图像。文本围绕右对齐图像流动。我希望每个“部分”从它自己的行开始，或者不要从前一部分的图像中流动。如果我用一个表做这个，我会有一个列，每行“我想要的”一行。就像我说的，我不想用桌子。

一张图片值1k字，所以我们走了。这就是我要的：

这是我不想要的（但我刚刚使用＆lt; p＆gt;和＆lt; h2＆gt;标签）：

我想知道是否有一种技术可以让我强制“第2节”标签从第1部分的图像下方开始？我添加了绿色虚线，以说明我希望新部分开始的位置。

Answer 1

问题是什么，问题可能是因为，您将所有内容都包含在一个div中，而您只是将其全部写入一个div中，如下所示：

<div>
  <div class="content_one">
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file.png" alt="photo" />
    // and the second one starts just under that!
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file2.png" alt="photo" />
  </div>
</div>

这将导致整个身体相似，并且几乎没有障碍来控制元素的风格。如果你只是这样开始它，它会创造一个距离！另外，为了使它们在div中修复，使用clearfix也是一种解决方案。但如果你试图单独得到div，利润率会很好。假设：

<强>解决方案：

<div>
  <div class="content_one">
   <div class="each_content">
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file.png" alt="photo" />
   </div>
    // and the second one starts just under that!
   <div class="each_content">
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file2.png" alt="photo" />
   </div>
  </div>
</div>

现在，为此您将尝试设置保证金：

.each_content {
 margin: 5px;
}

它将设置一个余量，为5px的div。您也可以尝试使用边框，以确保它也有助于您检查div的开始位置和结束位置。

.each_content {
 margin: 5px;
 border: 4px dashed green;
}

我希望它可以帮到你。

Answer 2

创建一个包装元素，float您的p以及左侧的img元素，如

Demo

.wrap {
    width: 800px;
}

.wrap p {
    float: left;
    width: 500px;
}

.wrap img {
    float: left;
    width: 200px;
    border: 1px solid #f00;
}

现在您的.wrap元素包含浮动子元素，因此您需要清除它们，因此请在overflow: hidden;的父元素上使用.wrap，否则请使用下面的代码片段来自我明确的父母

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

为何选择Clear Floats？

在this示例中使用background-color .wrap，但我看不到任何颜色，这只是因为容器元素不知道浮动元素的尺寸，依次为了解决这个问题，我们清除像this

这样的花车

---

您可以参考与我相关的this或this回答。

Answer 3

在尝试了这里提出的各种建议后，我无法使用其中任何一个，因为wordpress会删除HTML标签，例如

，因此不支持创建容器。

我正在使用桌子。 啊，进化的网络......

Answer 4

在每个新部分使用clearfix class。

来自加拉格尔的帖子：

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}