4

我正在构建一个工具栏，我希望以下示例中的黄色部分占据整个空间（白色）：

http://jsfiddle.net/MWjGH/1/

<div class="left"> Some content </div>
<span class="middle"> This should fill the space left </span>
<div class="right"> Some other content </div>

用CSS：

.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    background-color: yellow;
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

编辑：左右的内容是动态的，它可以改变，所以我不想在它们上设置宽度

4

5 回答 5

10

我不知道这是否适合您，因为 HTML 略有变化：

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<span class="middle"> This should fill the space </span>

但我相信这是你想要的，

CSS：

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
    display: block;
    overflow:hidden;
}
.right {
    float: right;
    background-color: #ddd;
}

演示：http: //jsfiddle.net/pavloschris/MWjGH/12/

于 2013-03-15T09:04:30.037 回答
6

将中间 div 放在浮动 div 之后：

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<div class="middle"> This should fill the space left </div>

然后，不要更改任何display属性，以便它们保持打开状态block（默认为div）

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
}
.right {
    float: right;
    background-color: #ddd;
}

小提琴：http: //jsfiddle.net/hLmj7/

于 2013-03-15T08:56:30.340 回答
3

如果两侧列没有固定宽度，则始终可以display:table-cell.

.left {
    background-color: #ddd;
    display: table-cell;
}
.middle {
    background-color: yellow;
    display: table-cell;
    width:100%;
}
.right {
    background-color: #ddd;
    display: table-cell;
}

JSFiddle 示例。

有了这个，您就可以添加min-width到外部列，而无需不断更改中间元素的宽度。

min-width带有应用的JSFiddle 示例。

于 2013-03-15T08:58:41.140 回答
0

试试这个：

不要右对齐你的最后一个 div

制作你所有的容器float:left

并为每个容器提供百分比宽度，以便它们的总和应为 100%；

工作小提琴

如果您不想强制使用静态宽度，请执行以下操作：

给你的每个容器一个width:auto，但要被通知，

如果每个容器的宽度总和大于父容器（在您的情况下为主体）容器的宽度，则会发生换行，一个 div 将向下滑动到下一行。

看到这个小提琴

于 2013-03-15T09:00:06.340 回答
0

我会将您的 div 包装在一个包装器中，并将背景颜色分配给包装器 div 然后，您根本不需要指定宽度。 jsfiddle

html:

<div class="toolbar">
    <div class="left"> Some content </div>
    <div class="middle"> This should fill the space left </div>
    <div class="right"> Some other content </div>
</div>

CSS：

.toolbar {
    background-color: yellow;    
}
.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

考虑将 clearfix 添加到包装器 div，因为里面的 div 是浮动的:)

于 2013-03-15T09:00:37.407 回答