首頁  >  問答  >  主體

使inline-block的DIV在容器元素頂部對齊

<p>當兩個<code>inline-block</code>的<code>div</code>的高度不同時,為什麼較短的不會與容器的頂部對齊? (<strong>DEMO</strong>):</p> <p> <pre class="brush:css;toolbar:false;">.container { border: 1px black solid; width: 320px; height: 120px; } .small { display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="small"></div> <div class="big"></div> </div></pre> </p> <p>如何將小的<code>div</code>與其容器頂部對齊? </p>
P粉982881583P粉982881583447 天前499

全部回覆(2)我來回復

  • P粉203792468

    P粉2037924682023-08-22 12:35:59

    您需要為兩個子div新增vertical-align屬性。

    如果.small總是較短,則只需將該屬性套用到.small。 但是,如果其中任何一個可能是最高的,則應將此屬性套用到.small.big

    .container{ 
        border: 1px black solid;
        width: 320px;
        height: 120px;    
    }
    
    .small{
        display: inline-block;
        width: 40%;
        height: 30%;
        border: 1px black solid;
        background: aliceblue; 
        vertical-align: top;   
    }
    
    .big {
        display: inline-block;
        border: 1px black solid;
        width: 40%;
        height: 50%;
        background: beige; 
        vertical-align: top;   
    }

    垂直對齊影響內聯或表格單元格框,這個屬性有很多不同的值。請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align以了解更多詳情。

    回覆
    0
  • P粉823268006

    P粉8232680062023-08-22 09:52:17

    因為預設情況下,vertical-align被設定為baseline

    改用vertical-align:top

    .small{
        display: inline-block;
        width: 40%;
        height: 30%;
        border: 1px black solid;
        background: aliceblue;   
        vertical-align:top; /* <---- this */
    }

    http://jsfiddle.net/Lighty_46/RHM5L/9/

    #或如@f00644所說,你也可以對子元素應用float

    回覆
    0
  • 取消回覆