2

私はCSSでいくつかの本当の問題を抱えています!

#Box div を中央に配置するように次のように設定しました。これは、モバイル ブラウザー以外のすべてで完全に機能します。モバイル ブラウザの画面サイズは非常に狭いため、左側が途切れがちです。私は以前に似たようなことを尋ねましたが、それを調整するのに役に立たなかった.

前回からコンテナとレイアウトのdivを入れましたが、それでも同じ問題が発生します。左側が切り落とされないようにコードを調整する方法はありますか?

    .pageContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        padding-left: 1.82%;
        padding-right: 1.82%;
        position:relative; }

    #LayoutDiv1 {
        clear: both;
        margin: auto;
        width: 100%;
        display: block;
        text-align:center;
        position: relative; }

    #Box {
        width: 487px;
        height: 181px;
        position: absolute;
        left: 50%;
        top: 236px; 
        margin-left: -244px;
        z-index:6; }

html:

    <body>
<div class="pageContainer">
    <div id="LayoutDiv1">
    <div id="Twitter">
    <a href="http://www.twitter.com/wekaptureit" target="new"><img     src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/></a>
    </div>

<div id="Facebook">
<a href="http://www.facebook.com/wekaptureit" target="new"><img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/></a>
</div>

<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>

    </div>
    </div>
    </body>
4

2 に答える 2

2

これを行うための2012年のより賢い方法は、メディアクエリを使用することです。ここにいくつかのインスピレーションがあります。

基本的に、小さい画面に対してのみロードされる別のスタイルシートを作成します。今はやり過ぎのように思えるかもしれませんが、あなたのウェブサイトが成長するにつれて、あなたはこれを提案してくれて私に感謝するでしょう（またはあなたはできません;））

また、そうしないでくださいmargin-left: -244px;、そのハッキーであり、クロスブラウザの問題を引き起こす可能性があります。HTMLをいくつか見せてください。よりクリーンな方法を紹介します。

于 2012-09-24T11:52:32.987 に答える
0

ビューポートのメタ タグを含めていますか? これにより、モバイルで発生する可能性のあるスケーリングの問題が解消されます。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

CSS にとって: <div>s はブロック要素であり、デフォルトの動作は親の幅 (100%) を拡張することです。これらの CSS 宣言は必要ありません。

#LayoutDiv1あなたのコードとレイアウトから、ポジショニングを使用する必要がないように見えます。

この単純なコードは、左側のカットオフを処理します (ここにフィドルがあります)。

.pageContainer {
    margin:0 auto;
}

#LayoutDiv1 {
        margin: auto;
        text-align:center;
}

#Box {
    width: 487px;
    height: 181px;
    top: 236px; 
    margin:236px auto 0;
}

また、前述のポスターのように、@media クエリを追加して、モバイルの #Box 用に小さい画像を読み込むこともできます (既存の CSS ファイルに 1 ～ 2 行 [または 200] を追加するだけです)。

@media only screen and (max-width: 767px) {
    #Box { background:url('imgs/mobile-hero.jpg'); }
}
于 2012-09-24T14:01:47.183 に答える