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

2 番目: 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

現在、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 が浮動要素とインラインに配置されず、代わりにその下に配置されます。

安全のために、おそらく上記の両方を行う必要があります。

于 2013-06-07T13:02:20.173 に答える