1

divそれぞれ幅 100%、高さ 100%の 4 つのコンテナーを持つページを作成しようとしています。中央にメインdivがあり、次にその左、右、下にメインが必要です (はい、jQuery アニメーションのために、このように配置する必要があります)。

以下は私の現在のコードです（そしてここにJSFiddleがあります）：

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <div id="container4"></div>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
}

#container1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: blue;
}

#container2 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: -100%;
    background-color: red;
}

#container3 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 100%;
    background-color: green;
}

#container4 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
    left: 0;
    background-color: orange;
}

div右と下にある s には問題はありませんでしたが、左にある s は機能していないようです。

また、メインの div をおよびに左に配置しようとしましdivたが、ページを読み込んでメイン(青いもの) を表示する方法がわかりません。この例は、この JSFiddleにあります。left: 0top: 0left: 100%top: 0div

何か案は？

4

2 に答える 2

2

あなたの課題は、要素の配置に関するものではありません。ロード時にページをレイアウトの水平方向の中央にスクロールする必要があるという事実に関するものです。これは、javascript を介してのみ行うことができます。 これは、フィドルが機能する素晴らしいq/aです。

更新: 上記のリンクの手法とスクリプトを使用して更新されたコードを次に示します。Codepen で表示します。

于 2013-10-25T03:35:18.437 に答える
0

そのようには機能しません。正しく簡単な方法は、ページの読み込み時に javascript を使用して中央の div に焦点を当てるか、他のすべての div を含むより大きなコンテンツ div を作成し、表示する div に従って位置を変更することです。 [左のプロパティにページ幅を追加して、右にスクロールすることができます]

于 2013-10-25T03:40:12.463 に答える