html - 并排显示两个框，就好像它们是一个框一样

Question

我有这个盒子http://jsfiddle.net/eqhH9/show/这是小提琴http://jsfiddle.net/eqhH9/

我想显示一个带有文本的框，另一个带有字形图标，如示例中所示。这是html

<div class="col-sm-3 les_four">
<article class="les_two_boxes"><section class="les_b_1">hello<section class="les_b_2"><span class="glyphicon glyphicon-film "></span></section></section></article>
</div>

问题是第一个盒子<section class="les_b_1">hello......当有更多文本时，整个盒子都弄乱了。我该如何解决这个问题？

Answer 1

如果您将每篇文章的 html 更改为以下内容（section.les_b_2不再嵌套）：

<section class="les_b_1">hello</section>
<section class="les_b_2"><span class="glyphicon glyphicon-film "></span></section>

您可以使用以下样式来实现您想要的：

.les_two_boxes {display:table; width:100%;}
.les_two_boxes > section {display:table-cell;}
.les_b_1{background-color:pink;vertical-align:top;width:60%;}
.les_b_2{border-left:1px solid white;font-size:30px;width:40%;background-color:brown;text-align:center; vertical-align:middle;}

例子