Question

我有这个方框http://jsfiddle.net/eqhH9/show/，这是小提琴http://jsfiddle.net/eqhH9/

我想显示一个带有文本的框，另一个带有一个glyphicon，如示例所示。这是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;}

Example

并排显示两个盒子，就像它们一样

1 个答案: