Question

三列具有不同的宽度，并按预期并排堆叠，但是顶部的垂直对齐是偶然的。第二列似乎总是介于两者之间。我希望三列在顶部垂直对齐。

    #content{
        margin:0;
        padding: 0;
         display: inline-block;
    }

    #left{
        width: 40%;
        text-align: left;
    }

    #left p{
        display: inline;
    }

    #center{
        width: 20%;
    }

    #right{
        width: 30%;
    }

    .dinline{
       display:inline-block;
    }

 <div id="content">
       <div id="left" class="dinline">
          <h1>Integer gravida nibh quis urna</h1>
          <h3>Augue praesent a lacus at urna congue rutrum</h3>
          <p>
             Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat. Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
          </p>
          <button class="obutton">MORE DETAILS</button>
       </div>
       <div id="center" class="dinline">
          <h2>Feugiat Tempus</h2>
          <div class="img-thumb">
             <img src="" alt="">
             Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.
          </div>
          <div class="img-thumb">
             <img src="" alt="">
             Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.
          </div>
          <div class="img-thumb">
             <img src="" alt="">
             Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.
          </div>
       </div>
       <div id="right" class="dinline">
          <h3>Feugiat Tempus</h3>
          <a href="">Lorem ipsum dolor.</a><br>
       </div>
    </div>

当margin设置为零时，CSS中的列占据额外的margin

0 个答案: