添加文本元素的破坏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布局

回答

相关问题