14

好吧，伙计们，我一直在为这个而烦恼。

我有三个 div；左，中，右。全部 100% 高度。左右 div 的宽度固定为 150px。现在我希望中间 div 占据剩余空间。

示例：这里

CSS：

#left {
    height:100%;
    width:150px;
    float:left;
    background:red;
    z-index:999;
}
#middle {
    height:100%;
    width:100%;
    background:yellow;
    margin-left:-150px;
    margin-right:-150px;
}
#right {
    float:right;
    height:100%;
    width:150px;
    background:red;
    z-index:998;
}
4

5 回答 5

19

使用display: table：

#container {
    display: table;
    width: 100%;
}

#left, #middle, #right {
    display: table-cell;
}

#left, #right {
    width: 150px;
}

#container你的父元素在哪里

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

这是一个小提琴。

于 2013-03-20T11:45:56.290 回答
2

检查这个类似的答案

HTML

<div class = "container">
    <div class = "fixed">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class = "fluid">
        I'm fluid! Glee is awesome!
    </div>
    <div class = "fixed">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>

CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    width: 150px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}

演示

于 2013-03-20T11:47:29.597 回答
2

好的，使用flex并基于这个答案

#parent {
  display: flex;
}
#left {
  width:150px;
  background-color:#ff0000;
}
#middle {
  flex: 1 1 auto;
  background-color:#00ff00;
}
#right {
  width: 150px;
  background-color:#0000ff;
}
<div id="parent">
  <div id="left">left</div>
  <div id="middle">middle</div>
  <div id="right">right</div>
</div>

如果左右 div 也具有可变宽度，这实际上是有效的。

于 2017-10-13T14:03:04.150 回答
0

如果你不想使用表格单元格并且不想给你的外框一个固定的宽度（而是让它们的宽度由它们的内容决定，你可以使用溢出隐藏和浮动方法）

这种方法的坏处是你必须坚持在你的 div 上隐藏溢出，而且你必须以向后的方式排列你的 div（见下文）

演示

HTML

<div class='container'>

    <div class='third-box'>Third</div>

    <div class='first-second'>
        <div class='first-box'>First</div>
        <div class='second-box'>Second</div>
    </div>

</div>

CSS

.container {
     width: 400px;
}

.first-second {
    overflow: hidden;
}

.first-box {
    float: left;
    background-color: coral;
}

.second-box {
    overflow: hidden;
    background-color: aquamarine;
}

.third-box {
    float: right;
    background-color: salmon;
}
于 2017-07-04T10:13:10.623 回答
0

我用它来为侧面的项目设置一个灵活的宽度。在列出的项目中使用它以获得侧面带有 2 个按钮的进度条。

ul {
    display: table;
    width: 100%;
}

ul > li {
    display: table-cell;
}

ul > li:nth-child(2) {
    min-width: 100%;
}
于 2020-04-15T12:28:22.767 回答