位置：绝对位置：相对答案

【问题标题】：position: absolute in position: relative位置：绝对位置：相对
【发布时间】：2012-08-31 16:58:49
【问题描述】：

我正在尝试使用 2 个固定宽度的 div（左右浮动）和一个根据显示宽度更改其宽度的流体中心 div 来制作一个 3 列布局。所有这些都包含在包装器 div 中。我这样做的方法是为具有固定宽度的 div 创建左右浮动的第三个 div，该第三个 div 相对于包装 div 定位，边距向右，以便为右侧 div 留出位置显示。然而问题是，如果流体 div 有内容，它会溢出正确的 div，忽略 margin-right 样式。为什么会这样？看来1111

get 出于某种奇怪的原因被预先格式化。

代码：

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>

【问题讨论】：

最好将样式与 HTML 分开。将它们移动到单独的 CSS 文件中，并使用类或 ID 引用元素。
这只是个假人，我知道关于内联样式的建议
使用单独的 css 也会更容易阅读，所以即使这只是虚拟代码，它也会使问题变得更好。

标签： css

【解决方案1】：

我建议使用两个浮动的 div。

在右边，放置中间和右边的div。

所有这些都是通过浮点数完成的：

HTML：

<div class="left">content for the left</div>
<div class="rightContainer">
  <div class="right">right content</div>
  <div class="middle">middle content</div>
</div>

CSS：

.left {
    float: left;
    width: 100px;
    overflow: hidden;
    min-height: 30px;
    background: red;
}
.rightContainer {
    float: none;
    min-height: 30px;
    overflow: hidden;
    background: yellow;
}
.right {
    float: right;
    width: 100px;
    overflow: hidden;
    min-height: 30px;
    background: blue;
}
.middle {
    overflow: hidden;
    min-height: 30px;
    background: green;
}

示例：

更新：应用于您的内容：http://jsfiddle.net/2KXW5/1/

【讨论】：

谢谢，但为什么不能使用绝对位置，相对位置？理论上这不应该发生
@viktor 因为很长的文本使绝对定位的 div 延伸到相对项目上，将其视为存在于上层的东西，它不会“尊重”相对的边界 (父母），因此我建议使用浮动，防弹:)
但是margin-right 样式应该仍然有效，因为它包含在一个也被定位并看到位置的元素中：relative;孩子。此外，111 文本似乎被渲染为好像已预先格式化。如果我将 111 写在不同的行上，则显示在不同的行上而不是一个单词上。

【解决方案2】：

这可以通过为您的中心流体 div 指定样式 word-wrap: break-word; 来解决。

【讨论】：

【解决方案3】：

浏览器不能很好地使用自动换行。无论如何，我希望这段代码能带来一些帮助：

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
    <div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>  
</div>

【讨论】：

【解决方案4】：

首先：段落元素是块级元素。谷歌它以了解更多信息。因此，如果您希望它不与另一个重叠，您也必须浮动它。

所以将其包含在标题中（或单独的文件 - 如果需要，也可以内联）：

<style type="text/css">
p {
   float:left;
}
</style>

然后重新排列你的 div：

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
    <div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>

【讨论】：

感谢您的建议，我知道块元素是如何工作的。在这种情况下，问题似乎不依赖于此，建议的代码不起作用。