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

Question

拜托，我正在自学CSS，有两个问题：

我在＆＃34; top＆＃34;里面有3个DIV。 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;
}

  

  
1. 如果我没有定义任何边距，为什么第一和第二DIV之间以及第二和第三DIV之间有空格？
  

因为标记中的div之间有空格（换行符+缩进），并且因为您将div显示为inline-block s。 另见How to remove the space between inline-block elements? Flexbox消除了这个问题，因此您可以立即删除display: inline-block。

[Updated fiddle]

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来填充所有剩余空间？

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

width: calc(100% - 264px);

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

  

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

由于inline-block的工作方式，您有差距。这就像是单词之间的空格。有几种方法可以解决这个问题，但float: left应该在这里做。像这样：

float: left;

同时将width: 100%添加到您的top元素并将其设置为display: inline-block。

试试这个Demo

.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;
＆＃13;
＆＃13;
* {
  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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. overflow: hidden;
＆＃13;
＆＃13;
* {
  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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 5

内联块元素总是占用一些空间（取决于它的字体大小）到它的右侧。所以更好的方式来使用flex。但你可以使用下面的css来解决它们。

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