Html div内的文本替换其他div

我使用块内联属性将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>

为什么此div中的文本替换其他div
第2组
第3组

这是我为解决这个问题而制作的小提琴

---

将

浮点：左

添加到这些类

。解释的\u c-1、\u c-2、\u c-3、
缺少浮点：左

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

参见
我添加了
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;
    }


现在，您可以拥有任意多的文本
第2组
第3组
.集装箱{
宽度：604px；
}
.解释了c-1、.解释了c-2、.解释了c-3{
显示：内联块；
宽度：33.3%；
高度：160px；
右边距：-4px；
浮动：左；
}
.c-1{
背景:#bbb ;；
}
.c-2{
背景：#ccc；
}
.c-3{
背景：ddd；
}

我只需设置
垂直对齐：top.explained_c-1、.explained_c-2、.explained_c-3
）的代码>属性，因为您可能并不总是希望浮动它们

在这里查看：

这样，您就可以从每个元素的顶部将元素彼此对齐。
您需要为div定义一个浮点值，比如
div{float:left}
请参见forked fiddle->