CSS-居中的div填充剩余水平空间

Question

拜托，我正在自己学习CSS，有2个问题：

我在“顶部” DIV中有3个DIV，并且我需要第二个（在中间）填充所有剩余空间。

我在哪里得到的： https : //fiddle.jshell.net/3j838det/

这是HTML代码：

<div class="main">
  <div class="top">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
  </div>
  <div class="bottom">bottom</div>
</div>

这是CSS代码：

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.main .top {
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
}
.main .top .first {
  width: 140px;
  padding: 4px;
  display: inline-block;
  background-color: #FFCC66;
}
.main .top .second {
  width:auto;
  padding: 4px;
  display: inline-block;
  background-color: #FF9966;
}
.main .top .third {
  width: 100px;
  padding: 4px;
  display: inline-block;
  background-color: #FF6666;
}
.main .bottom{
  height:60px;
  padding: 4px;
}

我的问题是：

1. 如何制作第二个DIV来填充所有剩余空间？

2. 如果我未定义任何边距，为什么第一和第二DIV之间以及第二和第三DIV之间有间隔？

谢谢！！

Answer 1

1. 如何制作第二个DIV来填充所有剩余空间？

Flexbox的工作！ ：D
添加以下CSS：

.main .top {
    display: -webkit-flex;
    display: flex;
}
.main .top .second {
    -webkit-flex: 1;
    flex: 1;
}

2. 如果我未定义任何边距，为什么第一和第二DIV之间以及第二和第三DIV之间有间隔？

因为标记中的div之间有空格（换行+缩进），并且您将div显示为inline-block s。
另请参阅如何删除内联块元素之间的空间？ 。
Flexbox消除了这个问题，因此您可以删除display: inline-block 。

[ 更新小提琴 ]

Answer 2

使用表格单元格布局。

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.main .top {
  width: 100%;
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
  display: table;
  table-layout: fixed;
}
.main .top .first {
  display: table-cell;
  width: 140px;
  padding: 4px;
  background-color: #FFCC66;
}
.main .top .second {
  display: table-cell;
  padding: 4px;
  background-color: #FF9966;
}
.main .top .third {
  display: table-cell;
  width: 100px;
  padding: 4px;
  background-color: #FF6666;
} 
.main .bottom {
  height:60px;
  padding: 4px;
}

Answer 3

如何制作第二个DIV来填充所有剩余空间？

您可以通过计算calc可用的剩余宽度来计算.second类的宽度。 像这样：

width: calc(100% - 264px);

上面的264是根据first和third的总width （ 140px + 100px = 240px ）加上所有元素的总填充（ 24px ） 264px ，即264px 。

---

如果我未定义任何边距，为什么第一和第二DIV之间以及第二和第三DIV之间有间隔？

由于inline-block工作原理，您之间存在差距。 就像单词之间的空格。 有几种方法可以解决此问题，但需要float: left应该在这里执行。 像这样：

float: left;

还要在top元素中添加width: 100%并将其设置为display: inline-block 。

试试这个演示

 .main { width: 500px; margin: 10px auto 0 auto; border: 1px solid #000000; } .main .top { border-bottom: 1px solid #000000; background-color: #CDCDCD; display: inline-block; width: 100%; } .main .top > div { padding: 4px; float: left; } .main .top .first { width: 140px; background-color: #FFCC66; } .main .top .second { width: calc(100% - 264px); background-color: #FF9966; } .main .top .third { width: 100px; background-color: #FF6666; } .main .bottom{ clear: both; height:60px; padding: 4px; } 

 <div class="main"> <div class="top"> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> </div> <div class="bottom">bottom</div> </div> 

Answer 4

有两种标准方法可以实现此目的。

1. display: table;

 * { box-sizing: border-box; } .main { width: 500px; margin: 10px auto 0 auto; border: 1px solid #000000; } .top { display: table; width: 100%; border-bottom: 1px solid #000000; background-color: #CDCDCD; } .cell { display: table-cell; width: 60px; padding: 4px; } .first { background-color: #FFCC66; } .second { width: 100%; background-color: #FF9966; } .third { background-color: #FF6666; } .bottom { height: 60px; padding: 4px; } 

 <div class="main"> <div class="top"> <div class="cell first">1</div> <div class="cell second">2</div> <div class="cell third">3</div> </div> <div class="bottom">bottom</div> </div> 

1. overflow: hidden;

 * { box-sizing: border-box; } .main { width: 500px; margin: 10px auto 0 auto; border: 1px solid #000000; } .top { border-bottom: 1px solid #000000; background-color: #CDCDCD; } .top:after { content: ''; clear: both; display: block; } .top .first { float: left; width: 140px; padding: 4px; background-color: #FFCC66; } .top .second { overflow: hidden; padding: 4px; background-color: #FF9966; } .top .third { float: right; width: 100px; padding: 4px; background-color: #FF6666; } .main .bottom { height: 60px; padding: 4px; } 

 <div class="main"> <div class="top"> <div class="first">1</div> <div class="third">3</div> <div class="second">2</div> </div> <div class="bottom">bottom</div> </div> 

Answer 5

内联块元素始终在右侧占用一些空间（取决于字体大小）。 因此使用flex更好方法。 但是您可以在下面使用此CSS来解决它们。

.main .top>div{
    margin-right: -4px;
}