让两个div同行显示：CSS float和display属性详解

<div class='container'>
  <div class='left'>Left content</div>
  <div class='right'>Right content</div>
</div>
<style>
  .left {
    float: left;
    width: 50%;
  }

  .right {
    float: right;
    width: 50%;
  }
</style>
<h2>使用display属性</h2>
<p>将父元素的display属性设为flex，子元素的flex属性设为1，这样它们就会自动平分宽度并在同一行上显示。</p>
<pre><code class="language-html">&lt;div class='container'&gt;
  &lt;div class='left'&gt;Left content&lt;/div&gt;
  &lt;div class='right'&gt;Right content&lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
  .container {
    display: flex;
  }

  .left, .right {
    flex: 1;
  }
&lt;/style&gt;
</code></pre>