-1

Web サイトを構築しようとしていますが、div の「タイル」の位置に問題があります。これは私が取り組んでいるサイトです: https://dl.dropboxusercontent.com/u/103417607/1/index.html 私は CSS とレスポンシブ プログラミングの世界にかなり慣れていません。私が抱えている問題は、右側の「日付」タイルです。ウィンドウのサイズを変更すると、何らかの理由で、このタイルが「ログオン」タイルの下に忍び寄ります。他のタイルにはこれがないので、何が間違っているのかわかりません。

ブラウザー ウィンドウの右側をゆっくりと左にドラッグして (幅を小さくして)、自分でテストできます。他のタイル (スクリーンスターと最新ニュース) はうまく配置されたままですが、日付タイルはゆっくりと忍び寄ります。私のcssコードは同じなので、これはわかりません。

これは私の CSS ファイルです: https://dl.dropboxusercontent.com/u/103417607/1/css/style.css

どんな助けでも大歓迎です、これは私に頭痛の種です。

(私は JQUERY モザイクのものをチェックしましたが、それが私が探しているものかどうかはわかりません)

ありがとう、マールテン

4

2 に答える 2

0

これらのヒントのおかげで問題を解決できました: http://www.htmlforums.com/css/t-positioning-divs-in-mosaic-style-160801.html#post854724

乾杯。マールテン

于 2015-02-25T10:09:38.033 に答える
0

問題のdivCSS には次の CSS があります。

#datequote_position_front {
    float: right;
    margin-top: -610px;
}

これは、上端<div>が通常のドキュメント フローよりも610 ピクセル低いことを示しています。

の垂直位置は、ドキュメント フローでその上に表示<div>される他のオブジェクトによって直接影響を受けると想定できます。<div>s

<div>が上に浮いているのは、ビューポートの幅を狭くすると、水平メニューが消えるためです。

確認していませんが<div>、水平メニューの高さとまったく同じピクセル数だけ上昇していると思います。

したがって、の垂直位置が<div>変化しないようにするための解決策は、別の方法を使用して を配置すること<div>です。ドキュメント フロー内の他の要素に関連しないもの。

例えば：

#datequote_position_front {
    position: absolute;
    top: 610px;
    right: 6px;
}

これは、<div>が常に親の上端から 610 ピクセル下、親の上端から 6 ピクセル左に絶対配置されることを意味します。

注意

2 つのポイント:

top1) ブラウザーでこれらのスタイルをテストしていないため、デザインに合わせてとrightの座標を<div>正しく調整する必要がある場合があります。

2)より狭いビューポート幅での宣言をmedia query変更する場合は、(おそらく) を挿入する必要があります。absolute position<div>

于 2015-02-23T14:42:42.563 に答える