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

您的inline-block和.left课程中没有.right。如果您添加以下内容，则可以：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%; 
}

我建议你看看bootstrap rows

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

此解决方案不需要额外的CSS，您可以根据屏幕大小自定义div的大小。

为什么这两个div元素没有使用display inline block对齐？垂直对齐：顶部？

2 个答案: