0

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

一张图片值 1k 字，所以我们开始吧。这就是我要的： 在此处输入图像描述

这就是我不想要的（但我只是使用 < p > 和 < h2 > 标签得到的）： 在此处输入图像描述

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

4

4 回答 4

0

问题是什么，问题可能是因为，您将所有内容都包装在一个 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;
}

它将为 div 设置 5px 的边距。您也可以尝试使用边框，以确保检查 div 的开始位置和结束位置。

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

我希望它可以帮助你。

于 2013-09-08T03:50:31.190 回答
0

创建一个包装元素，float你p的以及img左边的元素就像

演示

.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: "";
}

为什么要清除浮动？

在这个例子中我使用background-colorfor.wrap但我没有看到任何颜色，这仅仅是因为容器元素不知道浮动元素的尺寸，为了解决这个问题，我们像这样清除浮动

您可以参考与该主题相关的这个或我的这个答案。

于 2013-09-08T03:50:46.340 回答
0

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

所以不支持创建容器。

我正在使用表格。啊，进化的网络……

于 2013-09-28T03:56:04.263 回答
-1

在每个新部分上使用clearfix 类。

来自加拉格尔的帖子：

/**
 * 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;
}
于 2013-09-08T03:50:09.877 回答