我如何让下面的两个div在同一行上？(How do I make the lower two divs be on the same line?)

http://jsbin.com/egobu3

我试图放置显示器：内联，但这有缩小div的副作用。 基本上我想要一个宽条，并且下面两个较窄的区域将会是相同的大小。

http://jsbin.com/egobu3

I tried putting display:inline, but this had the side effect of shrinking the divs. Basically I want one wide bar, and two narrower areas below that will together be the same size.

最满意答案

只需将float: left添加到.b和.c 。

.b, .c {float: left}

http://jsbin.com/egobu3/2

或者，将display: inline-block添加到.b和.c ：

.b, .c {display:inline-block}

并删除HTML中的空格：

<div class="b">BBBB</div><div class="c">CCCC</div>

http://jsbin.com/egobu3/3

Simply add float: left to .b and .c.

.b, .c {float: left}

http://jsbin.com/egobu3/2

Alternatively, add display: inline-block to .b and .c:

.b, .c {display:inline-block}

And remove the whitespace in the HTML:

<div class="b">BBBB</div><div class="c">CCCC</div>

http://jsbin.com/egobu3/3

我如何让下面的两个div在同一行上？(How do I make the lower two divs be on the same line?)

http://jsbin.com/egobu3

我试图放置显示器：内联，但这有缩小div的副作用。 基本上我想要一个宽条，并且下面两个较窄的区域将会是相同的大小。

http://jsbin.com/egobu3

I tried putting display:inline, but this had the side effect of shrinking the divs. Basically I want one wide bar, and two narrower areas below that will together be the same size.

最满意答案

只需将float: left添加到.b和.c 。

.b, .c {float: left}

http://jsbin.com/egobu3/2

或者，将display: inline-block添加到.b和.c ：

.b, .c {display:inline-block}

并删除HTML中的空格：

<div class="b">BBBB</div><div class="c">CCCC</div>

http://jsbin.com/egobu3/3

Simply add float: left to .b and .c.

.b, .c {float: left}

http://jsbin.com/egobu3/2

Alternatively, add display: inline-block to .b and .c:

.b, .c {display:inline-block}

And remove the whitespace in the HTML:

<div class="b">BBBB</div><div class="c">CCCC</div>

http://jsbin.com/egobu3/3