不同的宽度div在同一行

Question

我试图将3 div s（分别具有不同的width s：10％，70％和20％）放在同一行，但中间的一行总是充满页面宽度。

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 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>

Answer 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设置了高度。