為什么這兩個div元素使用顯示內聯塊不與頂部對齊； 垂直對齊：頂部？

Question

在下面的代碼中，有2個子div元素.left和.right。 我使用左邊距向右移動.right並使用顯示內聯塊使div成為內容的大小，我認為這將有助於使div彼此對齊。 右邊的一個顯示在下方。 為什么？

<style type="text/css">
    html,body{
        color:#fff;
    }

    .container {
      background: linear-gradient(
        to right, 
        #ff9e2c 0%, 
        #ff9e2c 50%, 
        #b6701e 50%, 
        #b6701e 100%
      );
      height: 500px;
      width: 100%;
    }
    .left{
        width:40%;
        padding: 10px;
        vertical-align: top;
    }
    .right{
        margin-left: 50%;
        padding: 10px;
        width: 40%;
        vertical-align: top;
    }
</style>

<section class="container">
    <div class="left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, consequuntur.</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique exercitationem reiciendis doloribus animi cupiditate laborum, mollitia ipsum ad? Perspiciatis?</div>
</section>

Answer 1

您的.left和.right類中沒有inline-block 。 如果添加以下內容，它將起作用： JS Fiddle

.left, .right {display: inline-block;}
//and change the width of .right
.right {width: 40%; }

這不是我建議的設置方式，但是對於此示例，它可以正常工作。 我建議為.left和.right類使用單獨的背景，而不是在包裝器上使用漸變。 這為您提供了更多的靈活性和穩定性。

Answer 2

將每個div設置為寬度為50％的嵌入式塊，這些div將隨頁面調整大小。

.left {
    display: inline-block; 
    width: 50%; 
}
.right {
    display: inline-block; 
    width: 50%; 
}

我建議您看看引導程序行

<row>
 <div class="left col-md-6"></div>
 <div class="right col-md-6"></div>
</row>

此解決方案不需要其他CSS，您可以根據屏幕大小自定義div的大小。