Question

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

似乎已经预先格式化了。

代码：

<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

我建议使用两个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/

Answer 2

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

Answer 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>

Answer 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>

位置：绝对位置：相对

4 个答案: