同一行中不同宽度的div答案

【问题标题】：Different width divs in the same row同一行中不同宽度的div
【发布时间】：2015-08-24 21:23:53
【问题描述】：

我试图将 3 个divs（分别具有不同的widths：10%、70% 和 20%）放在同一行，但中间的总是占整个页面的宽度。

这是我的代码：

  #left-bar {
    width: 10%;
    background-color: #FF0000;
  }
  #middle-bar {
    width: 70%;
    background-color: #6600FF;
  }
  #right-bar {
    width: 20%;
    background-color: #99FF99;
  }

<div class="row">
  <div id="left-bar"></div>
  <div id="middle-bar"></div>
  <div id="right-bar"></div>
</div>

【问题讨论】：

嘿，dippas 非常感谢它解决了我的问题！
欢迎您，顺便说一句，您评论了您的问题，而不是我的回答 :)

标签： html css

【解决方案1】：

默认情况下，div 是块级元素，因此它们不在同一行中。

您有几个选项可以解决此问题：

带有 CSS flexbox 的选项：

.row {
  display: flex;
  width: 100%
}

.row>div {
  /*demo purposes */
  height: 30px;
}

#left-bar {
  flex: 0 10%;
  background-color: #F00;
}

#middle-bar {
  flex: 1;
  background-color: #60F;
}

#right-bar {
  flex: 0 20%;
  background-color: #9F9;
}

<div class="row">
  <div id="left-bar"></div>
  <div id="middle-bar"></div>
  <div id="right-bar"></div>
</div>

（旧选项）

带有`display:inline-block`的选项

.row {
  /*fix inline-block gap*/
  font-size: 0;
}

.row>div {
  display: inline-block;
  /*demo purposes */
  height: 30px;
}

#left-bar {
  width: 10%;
  background-color: #F00;
}

#middle-bar {
  width: 70%;
  background-color: #60F;
}

#right-bar {
  width: 20%;
  background-color: #9F9;
}

<div class="row">
  <div id="left-bar"></div>
  <div id="middle-bar"></div>
  <div id="right-bar"></div>
</div>

带有`display:table-[cell]`的选项

.row {
  display: table;
  width: 100%
}

.row>div {
  display: table-cell;
  /*demo purposes */
  height: 30px;
}

#left-bar {
  width: 10%;
  background-color: #F00;
}

#middle-bar {
  width: 70%;
  background-color: #60F;
}

#right-bar {
  width: 20%;
  background-color: #9F9;
}

<div class="row">
  <div id="left-bar"></div>
  <div id="middle-bar"></div>
  <div id="right-bar"></div>
</div>

【讨论】：

【解决方案2】：

table-cell 选项实际上在某些 Internet Explorer 版本中不起作用。但是使用float属性也可以达到同样的效果：

#left-bar{
          width:10%;
          background-color: #FF0000;
 }
 #middle-bar{
          width:70%;
          background-color: #6600FF;
 }
 #right-bar{
          width:20%;
          background-color: #99FF99;
 }

.row > div {float:left;}

<div class="row">
  <div id="left-bar">a</div>
  <div id="middle-bar">b</div>
  <div id="right-bar">c</div>
</div>

【讨论】：

你抄袭了我 :)... 有点，但不管怎样。我们的做法比表格解决方案更好；）
我写了这个：table-cell 选项实际上在某些 Internet Explorer 版本中不起作用，因为第一个答案是建议该选项，但后来那个人改变了他的答案并将其转换为超级答案。我忘了这里的人是这样做的。
你错了 "table-cell 选项实际上在某些 Internet Explorer 版本中不起作用。" 在canIuse 上查看有关display:table 的更多信息跨度>
我从 2004 年开始就在页面上应用样式。我可以根据经验向您保证，displat 表格单元格不是通用的（现在是通用的）。
仅供参考@AdamBuchananSmith 我不复制答案。当工作流程缓慢时，我会在这里回答一些问题。我对声誉之类的东西不感兴趣。

【解决方案3】：

#left-bar{
          width:10%;
          background-color: #FF0000;
          float:left;
 }
 #middle-bar{
          width:70%;
          background-color: #6600FF;
          float:left;
 }
 #right-bar{
          width:20%;
          background-color: #99FF99;
          float:left;
 }

如果这不起作用，请提供更多的 html 和 css，因为问题会出在其他地方。此外，请验证您是否为 div 设置了高度。

【讨论】：

带有 CSS flexbox 的选项：

带有display:inline-block的选项

带有display:table-[cell]的选项

带有`display:inline-block`的选项

带有`display:table-[cell]`的选项