1

我有一个包含段落、列表和右浮动 div 的 div。

父 div 有一个 text-align:justify; 财产。

我给 p 一个 20px 的（全方位）边距，但出于某种奇怪的原因，该段右侧的边距被忽略了。我在 ul 上尝试过，同样的事情发生了。

如果我不证明父 div 内的文本是合理的，则不会忽略边距。（但我确实希望它是合理的）。

浮动的 div 有一个边距：0；所以我想这不是利润率下降的问题。

浮动 div 是一个固定尺寸（像素）的 div，它是空的，除了背景图像。

我还尝试通过 margin-right:20px; 指定边距。它没有用......

我知道我可以通过在浮动 div 中添加左边距来解决它。但我想知道发生了什么。

这是我正在使用的代码（我只编辑了类名）。

CSS：

.parentDiv {
    position: absolute;
    width: 660px;
    height: 350px;
    z-index: -1;
    background-color:#4F4F4F;
    color:#FFFFFF;
    text-align:justify;
    overflow:hidden;
}

.foatedDiv {
    float:right;
    height:100%;
    margin:0;

}

.parentDiv p {
        margin:20px;
}

的HTML：

<div class="parentDiv">
 <div class="floatedDiv" style="width:234px;background-image:url(images/jp01.jpg)"></div>

  <strong><a href="someAnchor">Anchor</a></strong>

  <p>Sope paragraph that I cannot understand why ignores its right margin and is driving me crazy.</p>

  <strong>Some Topic</strong>

  <ul>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
  </ul>
</div>

这就是我得到的：

这里有一些不错的替代文字

4

3 回答 3

3

因为右边的那个图像是浮动到右边的。它正在应用您的保证金，您只是无法分辨。该段落实际上一直扩展到该图像下方的右侧，只是内容框没有。您的 margin-right 需要是该图像的宽度加上20像素，以便从图像中缩进 20 像素。

你的利润实际上是什么样的：

例子

虽然浮动元素将您的内容推向左侧，但实际的物理框仍在其后面扩展。要更多地推出内容，您必须考虑图像占用的所有空间。一种方法是将其宽度添加到右侧的边距，如下所示：

.parentDiv p {
    margin: 20px 254px 20px 20px; /* 234 + 20 = 254 */
}

请参阅jsFiddle 上的解决方案。

于 2012-01-25T04:34:50.203 回答
1

正在应用边距，但由于图像较宽，因此被视为“足够好”。

要解决此问题，请添加padding: 0.01px;. 直觉上这没什么区别，因为你看不到百分之一的像素，但是填充应该强制应用边距。

于 2012-01-25T04:37:17.267 回答
0

不确定您是否注意到拼写错误？

**.foatedDiv** {
  float:right;
  height:100%;
  margin:0;
}

应该是floatDiv

我相信代码可以满足您的要求。但是，在您引用图像的内联样式中，添加 margin-left: 20px 并且它应该修复它。

如果您有进一步的疑问，您可以将您的标题和无序列表包装在另一个 div 中，并在该 div 中处理填充和文本对齐等。

于 2012-01-25T04:45:20.037 回答