添加文本元素的破壞DIV佈局

我有3個div的顯示inline-block的那個水平對齊：添加文本元素的破壞DIV佈局

div { 
    background:blue; 
    height:200px; 
    width:30%; 
    margin:0px; 
    padding:0px; 
    border:10px solid red; 
    display:inline-block; 
    box-sizing:border-box 
}

enter image description here

當我添加一個文本元素插入的div之一，它被撞下來* （除非文字是position:absolute;）。
enter image description here

這是什麼原因？

http://jsbin.com/suweba/2/edit

來源

2014-10-29 mike

您需要添加vertical-align: top您div使用CSS。 vertical-align的默認屬性爲baseline，這就是爲什麼您的div與內容向下移動到底部。

這是jsBin demo。

div { 
 
    background: blue; 
 
    height: 200px; 
 
    width: 30%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 10px solid red; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    box-sizing: border-box 
 
} 
 
#b {} text { 
 
    /* position:fixed; */ 
 
    color: white; 
 
    font-size: 20px; 
 
}

<body> 
 
    <div id="a"> 
 
    <text>hello</text> 
 
    </div> 
 
    <div id="b"></div> 
 
    <div id="c"></div>

來源

2014-10-29 01:08:51

你能解釋一下爲什麼多出現這種情況？什麼是文字垂直對齊？謝謝 – mike 2014-10-29 16:49:16

使用display: inline-block時添加vertical-align: top。 inline-block的自然位置是baseline。

JSBIN

來源

2014-10-29 01:08:37 jmore009

添加文本元素的破壞DIV佈局

回答

相關問題