0

我有一个 div 被用作其他 3 个 div 的容器。这些都是水平排列的，使用float:left. 我需要left和rightdiv 来保持它们相同的固定宽度 40px。我希望中间 div 动态扩展——如果可能的话，只使用 CSS。

这是我正在试验的 JSFiddle：http: //jsfiddle.net/xJB9n/

如果您将我的.middleCSS 类的宽度更新为 620 像素，这就是我正在寻找的结果，其中middlediv 尽可能地展开，同时保持与其他两个 div 水平对齐。

无论宽度如何，container我都希望中间 div 始终扩展到剩余区域的 100%，并设置：

width: 100%;

不成功。有谁知道实现这一目标的方法？

4

4 回答 4

1

如果您可以更改标记，这可能会起作用：

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

使用以下 CSS：

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

看到这个小提琴。

或者，您可以使用绝对定位，尽管这在 IE7 及更低版本中可能会很痛苦。不过，这确实允许您保持 DOM 顺序。

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

使用这个（相关的）CSS：

.container { position: relative; }

.left  { position: absolute; left: 0;  top: 0; }
.right { position: absolute; right: 0; top: 0; }

.middle { margin: 0 40px; }

请参阅此小提琴以进行演示。

于 2013-06-18T19:56:24.447 回答
1

不知道您是否可以使用 flexbox，但以下适用于 Chrome、Firefox 和 Safari。

.container
{
    height: 100px;
    width: 700px;
    border: 1px solid black;
    display: box;
    display: -moz-box;
    display: -webkit-box;
}

.left, .right
{
    height: 100%;
    width: 40px;
    background-color: red;
    -moz-box-flex: none;
    -webkit-box-flex: none;
    box-flex: none;
}

.middle
{
    background-color: blue;
    height: 100%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

你可以看到小提琴http://jsfiddle.net/sx2Sg/

于 2013-06-18T20:05:36.823 回答
0

从你的结构。2个选项：

  1. display:table
  2. display:flex

display:table适用于所有浏览器，包括 IE8。 Display:flex还在成长中，还不成熟，很多浏览器都遇到了困难。我建议只有display:table; http://jsfiddle.net/xJB9n/1/

不要误会，它只是 CSS，你<table>的标记中没有。

于 2013-06-18T19:59:10.753 回答
0

除了 @Jeroen 的 css 之外，您还需要添加一件事：

html, body {
    height: 100%;
}

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

我添加的是实际设置height为 100%。如果没有将父元素的高度设置为 100%，则无法将高度 100% 应用于子元素。

请参阅此小提琴进行演示。

于 2013-06-18T20:08:01.910 回答