Question

我有div项section1，section2，section3的问题，因为我需要将它们连续设置。第3节似乎低于其他两个。你知道为什么会这样吗？我需要他们所有人都在同一条线上。

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

请参阅以下可能的解决方案：

<!DOCTYPE html>
<html>
<head>
  <style>
   ul#row li  {display:inline;}
   .div-inline {display:inline-block;}
  </style>
</head>
<body>
  <ul id="row">
    <li>
       <div class="div-inline">
         <h1><London></h1>
         <p>London is the capital city of England.</p>
       </div>
    </li>
    <li>
       <div class="div-inline">
         <h2><London></h2>
         <p>London is the capital city of England.</p>
       </div>
    </li>
    <li>
       <div class="div-inline">
         <h3><London></h3>
         <p>London is the capital city of England.</p>
       </div>
    </li>
  </ul>  
</body>
</html>

希望这会有所帮助。

Answer 2

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

为section div添加另一个CSS块可修复对齐问题：

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

需要所有div出现在同一行

2 个答案: