-2

我正在尝试设置一个页面，其中我有看起来像这样的文本

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/

4

2 回答 2

0

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

于 2013-06-07T12:56:25.747 回答
0

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

另一个解决方法是clear: both;像这样在底部文本包装器中添加一个样式。

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

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

为了安全起见，您可能应该同时执行上述两项操作。

于 2013-06-07T13:02:20.173 回答