Question

我有三个div。两个div应该并排，第三个应该在它之后。所有div的大小各不相同。

div的结构 -

<div style="display:inline">
  <table style="visibility:visible;width:100%;table-layout-fixed">
  </table>
</div>

因此，如果div1大于div2，那么div3将低于div2

      ---------------------------------------
       --------------             ----------
                                   Div 2
        Div 1                     ----------
                                  ----------
       --------------              Div 3
                                  ----------
      ---------------------------------------

但是如果div1小于div2，则div3不会在div1之后立即出现这就是它的对齐方式

      ---------------------------------------
       --------------             ----------
                                   Div 2
        Div 1                    
       --------------


       -------------              -----------
        Div 3      
       -------------            
      ----------------------------------------

我希望它像以下一样 -

      ---------------------------------------
       --------------             ----------
                                   Div 2
        Div 1                    
       --------------
       --------------
        Div 3
       --------------
                                  -----------     
      ----------------------------------------

Answer 1

您可以使用显示表！

我为你做了一个例子，看看这里：

HTML：

<div class="one">
        <p>Things</p>
        <p>Things</p>
        <p>Things</p>
</div>

CSS：

div p {
        margin: 0;
        padding: .5em;
        color: #fff;
        background: maroon;
}

.one{
    display: table;
    table-layout:fixed;
    width: 100%;
}

div.one p:last-child {
  display:table-cell;
  vertical-align : middle
}

http://codepen.io/AxelCardinaels/pen/oXGjpB

div的垂直对齐

1 个答案: