css - 位置 : absolute in position: relative

Question

我正在尝试制作一个 3 列布局，其中包含 2 个固定宽度的 div(左右浮动)和一个可根据显示宽度更改其宽度的流动中心 div。所有这些都包含在包装器 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>

Answer 1

我建议使用两个 float 的 div。

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

所有这些都是通过 float 完成的:

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/