不同的宽度div在同一行中 [英] Different width divs in the same row

问题描述

我试图把3 div s（分别用不同的 width s：10％，70％ & 20％）在同一行中，但中间的一行总是显示整个页面的宽度。

这是我的代码：

 ＃left-bar {width：10％; background-color：＃FF0000; }＃middle-bar {width：70％;背景颜色：＃6600FF; }＃right-bar {width：20％;背景颜色：＃99FF99; }  

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

$ b

解决方案

默认情况下， div 是一个块级元素，这就是它们不在同一行的原因。

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

使用CSS flexbox的

选项：

.row {display：flex; width：100％}。row> div {/ *演示目的* / 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 = 行 > < div id =left-bar>< / div> < div id =middle-bar>< / div> < div id =right-bar>< / div>< / div>

$ b

---

（旧选项）

选项与 display：inline -block

。 row {/ * fix inline-block gap * / font-size：0;}。row> div {display：inline-block; / *演示目的* / 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 = 行 > < div id =left-bar>< / div> < div id =middle-bar>< / div> < div id =right-bar>< / div>< / div>

$ b

option with display：table- [cell]

  .row {display：table; width：100％}。row> div {display：table-cell; / *演示目的* / 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 = 行 > < div id =left-bar>< / div> < div id =middle-bar>< / div> < div id =right-bar>< / div>< / div>

$ b

I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.

Here is my code:

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

解决方案

By default div is a block level element that's why they aren't in the same row.

You have a few options to fix this:

option with 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>

---

(old options)

option with 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>

option with 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>

这篇关于不同的宽度div在同一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！