html - 将两个方 block 排成一行，避免它们相互重叠

Question

一段时间以来，我一直在尝试让这两个街区在同一条线上彼此分开，但徒劳无功!

你能帮我解释一下吗

在这里http://jsfiddle.net/9UxZ8/2/

<div class="bookinfo">
<h2 id="bleu">Hello,how are you</h2>
<h3 id="auteur">John Jogn</h3>
<h4 id="coll">Kings and Queens</h4>
</div><div class="chapter">
<div id="gros"><h3 >I truly believe that you are a cleaver person, but please remain quiet.</h3></div></div>


div#gros
{
color:red;
width:350px;
font-size:30px;
display: inline-block;
vertical-align:top;
}

div.bookinfo {
vertical-align:top;
display: inline-block;
width: 300px;
vertical-align:top;

}

Answer 1

在您的标记中有两个父 div，它们是 .bookInfo 和 .chapter。所以我假设你想把它们放在一起。所以对于那个

添加display:inline-block到.chapter

.chapter
{
    display: inline-block;
}

Js Fiddle Demo