html - 需要所有的 div 出现在同一行

Question

我对 div 项 section1、section2、section3 有疑问，因为我需要将它们设置成一行。 Section3 似乎低于其他两个。你知道为什么会这样吗？我需要他们都在同一行。

div.bodySection
{
padding:5px;
background-color:lime; 
margin-left:10px;
display:inline-block;
}

<div id="section">

<div id="section1" class="bodySection">
<h1><London></h1>
<p>London is the capital city of England.</p>
</div>

<div id="section2" class="bodySection">
<h2><London></h2>
<p1>London is the capital city of England.</p>
</div>

<div id="section3" class="bodySection">
<h3><London></h3>
<p1>London is the capital city of England.</p>
</div>

</div>

Answer 1

看起来你可以使用 CSS flexboxes:https://jsfiddle.net/p22u9h1L/

为您的 section div 添加另一个 CSS block 可以解决您的对齐问题:

div#section
{
display: -webkit-flex;
display: flex;
}