Question

我使用block-inline属性将3个div放在一起。

当我在div中添加超过divs宽度的文本时，它会通过稍微向下移动来替换周围的div。

<div class="explained_container">
    <div class="explained_c-1">Why does text in this div displace the other divs</div>
    <div class="explained_c-2">Div 2</div> 
    <div class="explained_c-3">Div 3</div> 
</div>

这是我为解决问题而创建的小提琴。

http://jsfiddle.net/32E8m/

Answer 1

将float:left添加到这些类.explained_c-1, .explained_c-2, .explained_c-3

Answer 2

缺少浮动：左。

.explained_c-1, .explained_c-2, .explained_c-3 {
display: inline-block;
width: 33.3%;
height: 160px;
margin-right: -4px;
float:left;
}

请参阅http://jsfiddle.net/32E8m/3/

Answer 3

我已将float:left;添加到所有3个div元素中。现在您可以根据需要添加任意数量的文本。

    <div class="explained_container">
<div class="explained_c-1">Now you can have as many text as you want</div>
<div class="explained_c-2">Div 2</div> 
<div class="explained_c-3">Div 3</div>
</div>


.explained_container{
    width: 604px;
    }

.explained_c-1, .explained_c-2, .explained_c-3 {
    display: inline-block;
    width: 33.3%;
    height: 160px;
    margin-right: -4px;
    float: left;
    }

.explained_c-1 {
    background: #bbb;  
    }

.explained_c-2 {
    background: #ccc;
    }

.explained_c-3 {
    background: #ddd;
    }

http://jsfiddle.net/32E8m/4/

Answer 4

我只是将vertical-align: top;属性设置为这些类（.explained_c-1, .explained_c-2, .explained_c-3），因为您可能并不总是想要浮动它们。

请在此处查看：http://jsfiddle.net/32E8m/5/

这样，您就可以从每个元素的顶部将元素彼此对齐。

div中的文本替换了其他div

4 个答案: