Question

我如何让我的中间div占据剩余空间的宽度，但仍然留在其他2个div旁边的位置？此外，如果我删除侧面的2个div中的任何一个，主div应该只占用剩下的空间？

代码：

<div class="row-fluid">
<div class="span12">
    <div class="sidebar">1</div>
    <div class="content-box">2</div>
    <div class="sidebar">3</div>
</div>
</div>

http://jsfiddle.net/U3Hr5/2/

Answer 1

我的建议是使用一个表，因为你希望它们都在同一行但是有自己的高度。 HTML：

<div class="row-fluid">
<table style="width: 100%">
    <tr>
        <td class="sidebar">1</td>
        <td class="content-box">2</td>
        <td class="sidebar">3</td>
    </tr>
</table>

的CSS：

.sidebar {
    width:225px;
    background-color:blue;
}
.content-box {
    background-color:red;
}

这是小提琴编辑： http://jsfiddle.net/mDpEX/

// Flipbed

Answer 2

如果您不想使用表格进行布局，可以使用css3 显示表格，表格单元格属性，

#container {
    display: table;
    width: 100%;
}
#left, #middle, #right {
    display: table-cell;
    height: 100px;
}
#left, #right {
    width: 150px;
    background: green;
}
#middle {
    background: gray;
}

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

jsfiddle

更多关于css display properties

Answer 3

其实我没有正确地回答你的问题。如果您希望将div与第一个div之后的剩余空间对齐，即在侧边栏 div之后，只需将内容框的宽度设置为50％（或者您的尺寸为要）。

Answer 4

我假设你想要像this这样的东西。

HTML：

<div class="row-fluid">
    <div class="span12">
        <div class="sidebar">1</div>
        <div class="content-box">2</div>
        <div class="sidebar">3</div>
    </div>
</div>

CSS：

.sidebar {
    float:left;
    width:225px;
    background-color:blue;
}
.content-box {
    clear:left;
    background-color:red;
    width:225px;
}

希望这有帮助。

Answer 5

这取决于您希望布局在不使用JavaScript的情况下响应调整大小的程度以及您尝试使用的浏览器。如果您的布局基本上是静态的，并且您只想响应宽度更改，那么您可以使用类似的东西。

http://jsfiddle.net/U3Hr5/4/

HTML

<div class="row-fluid">
    <div class="span12">
        <div class="left sidebar">1</div>
        <div class="content-box">2</div>
        <div class="right sidebar">3</div>
    </div>
</div>

CSS

.span12 {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    width: 225px;
    background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
    margin-left: 225px;
    margin-right: 225px;
    background-color:red;
}

Answer 6

您可以尝试使用此类http://jsfiddle.net/kKGVr/

基本上，如果你不将内容包装在一个包含的div中，它将扩展以填充可用空间 - 你可以通过删除名为#left或#right的div来测试它。这也允许您添加页脚，因为没有使用绝对定位。

但是，如果中心柱比侧柱长......解决方案，它会掉下来吗？不确定，也许使用javascript调整侧柱的高度，使它们始终至少与中心列一样长。

HTML：

<div id="wrapper">
    <div id="right">...</div>
    <div id="left">...</div>
    content here
</div>

和CSS：

#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}

中间div 100％宽度

6 个答案: