Html 对齐图像左侧的两个文本div

我正在尝试设置一个页面，在那里我有文本，基本上是这样的

Team Name                                            My Team Name +-------------+
Division                                             Team Division|             |
Current Ranking                                                  5| Team Logo   |
Event                                          Event name and date| Here        |
Event Wins : 5        Event Scored : 16        Event Conceded : 13|             |
Match 1                Team 1 - team 1 score team 2 score - Team 2|             |
Match 2                Team 1 - team 1 score team 2 score - Team 2+-------------+
Etc

但我最终得到的是这个

Team Name             event wins : 5                 My Team Name +-------------+
Division              event scored : 16              Team Division|             |
Current Ranking       Event                            event     5| Team Logo   |
conceded : 3                                   Event name and date| Here        |
                                                                  |             |
                                                                  +-------------+
Etc

我尝试过在各种元素上使用各种float/clear组合，但我很难看出哪里出了问题，所以有没有人可以就我的html/css出了什么问题，更重要的是，为什么出了问题，让我更全面地理解float等，以防将来出现这些问题。谢谢

这里是jsfiddle链接

以及全屏结果

首先： 太多的

会杀死

第二： 您必须使用

浮动：左

、

浮动：右

、显示样式（

显示：块

）和页面的

宽度

以下是我对您的代码所做的操作，它会按照您的要求显示，请随意使用，但我强烈建议您将其设置为您自己的代码，以便您了解所有功能：

<div style="background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(137,137,137,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(137,137,137,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',    endColorstr='#80898989',GradientType=0 ); /* IE6-9 */">
<div style="margin-left:5px; display:block; width:900px;">
    <img src="/images/teams/logos/nexus.png" alt="Team Logo" style="float:right;width:239px;height:100%">
    <div style="background-color:red; float:left;width:600px;">
        <div style="display:block; float:left;">Team Name</div>
        <div style="display:block; float:right;">My Team</div>
    </div>
    <div style="background-color:green; float:left;width:600px;">
        <div style="display:block; float:left;">Division</div>
        <div style="display:block; float:right;">Elite Division</div>
    </div>
    <div style="background-color:blue; float:left;width:600px;">
        <div style="display:block; float:left;">Current Ranking</div>
        <div style="display:block; float:right;">1</div>
    </div>
    <div style="background-color:yellow; float:left;width:600px;">
        <div style="display:block; float:left;">Event</div>
        <div style="display:block; float:right;">CPPS Round 2     12/05/2013</div>
    </div>
    <div style="background-color:pink; float:left;width:600px;">
        <div style="display:block; float:left;width:200px; text-align:left;">event wins : 5</div>
        <div style="display:block; float:left;width:200px; text-align:center;">event scored : 16</div>
        <div style="display:block; float:left;width:200px; text-align:right;">event conceded : 3</div>
    </div>
</div>


队名
我的团队
分部
精英部
当前排名
1.
事件
CPPS第二轮12/05/2013
赛事胜利：5场
得分：16分
承认的事件：3

底部的文本将上升到顶部，因为当前两个浮动元素之间存在间隙。如果将浮动元素的宽度都设置为50%，则文本将环绕浮动元素，只要有空间，这将解决问题。此外，浮动元素应始终具有宽度

另一个解决方案是添加
clear的样式：两者都有到底部文本包装器，如下所示

<div style="clear: both;">
  <div>event wins : 5</div>
  <div>event scored : 16</div>
  <div>event conceded : 3</div>
</div>


赛事胜利：5场
得分：16分
承认的事件：3

这确保了该div不会与任何浮动元素内联，而是位于它们下面

为了安全起见，您可能应该同时执行上述两项操作。
您是否可以在上模拟相同的操作？请提供一个工作示例，并从CSS（背景cradients）中删除所有不必要的杂乱内容。对不起，您是对的，我应该使用JSFIDLE来给出示例。我已经创建了一个JSFIDLE页面并更新了原始帖子。我已经为
上色以便于查看。谢谢，这是我在阅读有关浮动的文章时错过的关键信息。现在我明白我做错了什么，我已经能够修改我的样式和html以正确地流动