2

Web サイトのレスポンシブ デザインを構築しようとしましたが、問題が発生しました。

このページにアクセスしてください: http://test.ufeed.se/

ブラウザのサイズを 820px 未満に変更すると、レスポンシブ デザインが表示されます。ここでの問題は、データとタイトルの間に奇妙なスペースができることです。スペースがある理由を見つけようとしましたが、運がないのですか？

これは、パーツの簡単なマークアップです:

<div class="rightPostCell">
        <div class="titleCon">
            <div class="linkIcoCon">
               ...
            </div>
            <div class="floatLeft">
               ...
            </div>
        </div>
        <div class="data dimText">
            <div class="commentsCon">
                ...
            </div>
            <div style="clear:both;"></div>
            <div class="createdDateCon">
                ...
            </div>
            <div style="clear:both;"></div>
            <div class="baseLinkCon">
                ...
            </div>
        </div>
    <div style="clear:both;"></div>
    </div>

タイトルとデータの間にスペースがあるのはなぜですか? どうすれば削除できますか？

4

5 に答える 5

2

問題のようですfloat( を使用するたびに問題が発生する傾向がありますfloat。一般的には、display: inline-blockこのような奇妙なバグが少ないため、好まれます) - データを無効clear: bothにすると、正しく配置されます。

于 2013-04-23T17:11:19.770 に答える
0

PostList.css の 37 行目に追加overflow:auto

mobile.css の 80 行目で float:none を変更しますclear:both

その後、マージンを追加する必要がありますが、発生したスペースが削除されます。

于 2013-04-23T17:20:42.090 に答える