Question

我正在尝试设置一个页面，我的文字看起来很像这个

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

我试过在各种元素上玩各种漂浮/清晰组合，但是我很难看到我哪里出错了，所以有人可以告诉我我的html / css有什么问题，更重要的是，为什么它是错的，所以我可以更充分地了解浮动等，以防止将来出现这些问题。感谢

这是jsfiddle链接

http://jsfiddle.net/LEaa9/1/

和全屏结果

http://jsfiddle.net/LEaa9/1/embedded/result/

Answer 1

第一：太多<div>会导致<div>。

第二：您必须使用float:left，float:right，展示风格（display:block）和页面的width进行游戏。

以下是我对您的代码所做的事情，并且按照您的要求进行显示，随时可以使用它，但我强烈建议您将其设为自己的所有权，以便了解所有内容的作用：

<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>

Answer 2

底部的文字显示在顶部，因为您的两个浮动元素之间目前存在差距。只要有空间，文本将环绕浮动元素如果你使它们都有50％的宽度可以解决问题。此外，浮动元素应始终具有宽度。

另一种解决方法是将clear: both;样式添加到底部文本包装器中。

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

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

为了安全起见，你应该做以上两点。

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

2 个答案: