不同的宽度div在同一行中

本文介绍了不同的宽度div在同一行中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图把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>