Html 文本换行到第二行时Div不浮动？

我遇到了浮动/对齐问题，似乎无法解决。当我把一些跳水运动员放在一起的时候，他们都会像他们应该的那样排成一排。。。直到其中一个div的文本下降到第二行

如果你看下面，你可以看到第1行是如何显示的。如您所见，ABCD位于同一行上其他div的旁边

在第2行中，您可以看到EFGH如何落在另一行中，即使在前一行中有足够的空间放置它

我怎样才能使div总是坐在一起，而不管有多少行文本

任何帮助都将不胜感激

屏幕截图

#示例列表{
边缘底部：35px；
浮动：左；
宽度：400px；
背景：橙色；
单词包装：打断单词；
}
.样本概述{
宽度：100%；
浮动：左；
字体系列：“开放式sans”、“arial”；
字体大小：12px；
线高：14px；
边缘底部：20px；
单词包装：打断单词；
}
.样本名称包装{
宽度：100%；
空白：正常；
}
.样本名称{
浮动：左；
}
.样品短跑{
浮动：左；
利润率：0.5px；
}
.样本组{
浮动：左；
背景：#ccc；
}

–
ABCD
–
EFGH
–
IJKL

尝试使用css显示属性。 设置

显示：内联到容器，以便容器div中的div彼此相邻。
希望这有帮助
 使用内联元素而不是浮动div解决了这个问题。看

如果您想了解为什么会发生这种情况，请访问。唯一的变化是CSS边框，它说明了浮动div换行到下一行的原因。
尝试下面的代码。我认为你根本不需要使用浮子。改用跨距。它们具有内联显示属性


.container{
最大宽度：300px；
}

荷叶紫罗兰布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
- 
ABCD
荷叶紫罗兰布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
- 
EFG
荷叶紫罗兰布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
- 
你好
这只是一条有助于理解原因的评论——div内容放在一个与其内容一样宽的盒子里。因此，尽管div2中的最后一行没有占据整个宽度，但包含它的框肯定占据了整个宽度
<div id="sample-list">

    <div class="sample-line">
        <div class="sample-overview">
            <div class="sample-name-wrap">
                <a href="">Line 1: ostrum exercitationem ullam corporis</a>
                <span class="sample-dash">
                    –
                </span>
                <span class="sample-span">
                    ABCD
                </span>
            </div>
        </div>
    </div>

    <div class="sample-line">
        <div class="sample-overview">
            <div class="sample-name-wrap">
                <a href="">Line 2: atis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab sdaf sfffdaf ntoowerf jdj</a>
                <span class="sample-dash">
                    –
                </span>
                <span class="sample-span">
                    EFGH
                </span>
            </div>
        </div>
    </div>

    <div class="sample-line">
        <div class="sample-overview">
            <div class="sample-name-wrap">
                <a href="">Line 3: vitae dicta sunt explicabo. Nemo enim</a>
                <span class="sample-dash">
                    –
                </span>
                <span class="sample-span">
                    IJKL
                </span>
            </div>
        </div>
    </div>

</div>

#sample-list {
    margin-bottom: 35px;
    float: left;
    width: 400px;
    background: orange;
    word-wrap: break-word;
}
.sample-overview {
    width: 100%;
    float: left;
    font-family: "open sans", "arial";
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 20px;
    word-wrap: break-word;
}
.sample-name-wrap {
    width: 100%;
    white-space: normal;
}
.sample-dash {
    margin: 0 5px;
}
.sample-span {
    background: #ccc;
}