0

我正在尝试使用 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>
4

4 回答 4

2

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

于 2012-08-31T08:49:00.900 回答
1

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

于 2012-08-31T08:47:07.330 回答
1

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

<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>
于 2012-08-31T08:52:47.157 回答
0

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

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

<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>
于 2012-08-31T08:58:49.160 回答