Html 以CSS为中心的div填充剩余的水平空间

请注意，我正在自学CSS，有两个问题：

我有3个DIV在一个“top”DIV中，我需要第二个DIV（在中间）来填充所有剩余的空间

我得到的是什么：

以下是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>

我的问题是：

如何进行第二次DIV以填充所有剩余空间

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

谢谢

如何进行第二次DIV以填充所有剩余空间

一份工作！：D
添加以下CSS：

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

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

因为标记中的div之间有空格（换行+缩进），并且因为您将div显示为

inline block

s.
另请参见。
Flexbox消除了这个问题，所以您可以一次删除

display:inline块

[]

如何进行第二次DIV以填充所有剩余空间

一份工作！：D
添加以下CSS：

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

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

因为标记中的div之间有空格（换行+缩进），并且因为您将div显示为

inline block

s.
另请参见。
Flexbox消除了这个问题，所以您可以一次删除

display:inline块

[]

如何进行第二次DIV以填充所有剩余空间

通过使用

calc

计算剩余宽度，可以计算

.second

类的宽度。像这样：

width: calc(100% - 264px);

float: left;

上面的264是根据

第一个

和

第三个

divs（

140px

+

100px

=

240px

）的总

宽度

加上所有元素的总填充（

24px

）计算得出的，即=

264px

---

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

由于

内联块

的工作方式，您会有间隙。就像单词之间的空格。有几种方法可以解决这个问题，但是

float:left

应该在这里解决。像这样：

width: calc(100% - 264px);

float: left;

同时将

width:100%

添加到

top

元素中，并将其设置为

display:inline block

试试这个

.main{
宽度：500px；
保证金：10px自动0自动；
边框：1px实心#000000；
}
.main.top{
边框底部：1px实心#000000；
背景色：#CDCDCD；
显示：内联块；
宽度：100%；
}
.main.top>div{
填充：4px；
浮动：左；
}
.main.top.首先{
宽度：140px；
背景色：#FFCC66；
}
.main.top.second{
宽度：计算（100%-264px）；
背景色：#FF9966；
}
.main.top.third{
宽度：100px；
背景色：#FF6666；
}
.main.底部{
明确：两者皆有；
高度：60px；
填充：4px；
}

1.
2.
3.
底部

如何进行第二次DIV以填充所有剩余空间

通过使用

calc

计算剩余宽度，可以计算

.second

类的宽度。像这样：

width: calc(100% - 264px);

float: left;

上面的264是根据

第一个

和

第三个

divs（

140px

+

100px

=

240px

）的总

宽度

加上所有元素的总填充（

24px

）计算得出的，即=

264px

---

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

由于

内联块

的工作方式，您会有间隙。就像单词之间的空格。有几种方法可以解决这个问题，但是

float:left

应该在这里解决。像这样：

width: calc(100% - 264px);

float: left;

同时将

width:100%

添加到

top

元素中，并将其设置为

display:inline block

试试这个

.main{
宽度：500px；
保证金：10px自动0自动；
边框：1px实心#000000；
}
.main.top{
边框底部：1px实心#000000；
背景色：#CDCDCD；
显示：内联块；
宽度：100%；
}
.main.top>div{
填充：4px；
浮动：左；
}
.main.top.首先{
宽度：140px；
背景色：#FFCC66；
}
.main.top.second{
宽度：计算（100%-264px）；
背景色：#FF9966；
}
.main.top.third{
宽度：100px；
背景色：#FF6666；
}
.main.底部{
明确：两者皆有；
高度：60px；
填充：4px；
}

1.
2.
3.
底部

使用表格单元格布局

.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;
}

---

使用表格单元格布局

.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;
}

---

内联块元素总是在右侧占用一些空间（取决于它的字体大小）。因此，使用flex的更好方法是

flex

。但是你现在可以使用下面的css来解决这些问题

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

---

内联块元素总是在右侧占用一些空间（取决于它的字体大小）。因此，使用flex的更好方法是

flex

。但是你现在可以使用下面的css来解决这些问题

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

---

实现这一点有两种标准方法

显示：表格

*{
框大小：边框框；
}
梅因先生{
宽度：500px；
保证金：10px自动0自动；
边框：1px实心#000000；
}
.顶{
显示：表格；
宽度：100%；
边框底部：1px实心#000000；
背景色：#CDCDCD；
}
.细胞{
显示：表格单元格；
宽度：60px；
填充：4px；
}
.首先{
背景色：#FFCC66；
}
.第二{
宽度：100%；
背景色：#FF9966；
}
.第三{
背景色：#FF6666；
}
.底部{
高度：60px；
填充：4px；
}

1.
2.
3.
底部

实现这一点有两种标准方法

显示：表格

*{