2

私はCSSを学ぼうとしています。これまで私は遅れを取り、テーブルを使用してページレイアウトを管理してきました。

cssに移行したいのですが、これを達成するためにいくつかの問題があります。

テーブルを使用した現在のページレイアウト：

ここに画像の説明を入力してください

以下のコードに従って、cssを使用してこのレイアウトを再作成しようとしました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>page layout</title>
    <style type="text/css">

        html, body {
            text-align:center;
        }

        #wrapper {       
            margin: 0 auto;       
            width: 1200px; 
            text-align:left;}

        #header {
            height: 100px;
            overflow: auto;
            background: green;
        }

        #main {
            background: yellow;
            float: left;
            width: 800px;
            height: 400px
        }

        #menu {
            background: red;
            float: left;
            width: 200px;
            height: 200px
        }

        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px
        }
        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px
        }
        #adverts {
            background: pink;
            float: left;
            width: 200px;
            height: 400px
        }

        #footer {
            background: grey;
            float: left;
            width: 1200px;
            height: 100px
        }


    </style>

</head>
<body>
<div id="header">
    Header
</div>

<div id="menu">
    menu
</div>
<div id="pics">
    pics
</div>
<div id="main">
    main
</div>

<div id="adverts">
    adverts
</div>

<div id="footer">
    footer
</div>

</body>
</html>

これにより、次の出力が生成されます。 ここに画像の説明を入力してください

pics divが間違った場所にあることがわかるように、これはページの下部ではなく、メニューdivの下にある必要がありますか？

私の質問ですが、写真のdivを正しい場所に配置するにはどうすればよいですか？次に、ページ全体を中央に配置するにはどうすればよいですか？

最後に、これは私のページレイアウトを管理するための最良の方法ですか？'main' divが情報でいっぱいになった場合はどうなりますか？すべての情報を表示するために高さを自動調整しますか？これはオーバーフローです：autoは許可しますか？

いつものように助けに感謝します、R

4

2 に答える 2

1

picsdivの順序が正しくありません。footerdivの前に表示する必要があります。

あなたはこれを持っています：

<div id="footer">
    footer
</div>

<div id="pics">
    pics
</div>

あなたはこれを持っている必要があります：

<div id="pics">
    pics
</div>

<div id="footer">
    footer
</div>

menuとpicsdivを希望どおりに配置するには、両方をラップ（含む）するを作成しますdiv（menupics以下のCSS / HTMLで）。

このコードは、上記のように機能します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>page layout</title>
    <style type="text/css">

        html, body {
            height: 100%;
            width:1200px;
            text-align:center;
        }

        #header {
            height: 100px;
            overflow: auto;
            background: green;
        }

        #main {
            background: yellow;
            float: left;
            width: 800px;
            height: 400px;
        }

        #menupics {
          float: left;
          width: 200px;
          height: 400px;
        }

        #menu {
            background: red;
            float: left;
            width: 200px;
            height: 200px;
        }

        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px;
        }

        #adverts {
            background: pink;
            float: left;
            width: 200px;
            height: 400px;
        }

        #footer {
            background: grey;
            float: left;
            width: 1200px;
            height: 100px
        }


    </style>

</head>
<body>

<div id="header">
    Header
</div>

<div id="menupics">
  <div id="menu">
    menu
  </div>
  <div id="pics">
    pics
  </div>
</div>

<div id="main">
    main
</div>

<div id="adverts">
    adverts
</div>


<div id="footer">
    footer
</div>

</body>
</html>
于 2012-09-15T22:37:40.123 に答える
1

ページ全体を中央に配置するにはどうすればよいですか？

幅が設定され、次のcssルールを持つ他のdivの周りにdivを配置することをお勧めします margin: 0 auto 0 auto;。

これは私のページレイアウトを管理するための最良の方法ですか？

HTMLは悪くありませんが、CSSで指定しすぎています。CSSベースのレイアウトでは、少ないほうが実際には多くなります。可能な限り、幅と高さを指定することは避けてください。

上記のセクションでは、ページを中央に配置できるように、他のdivをラップするdivを追加することについて説明しました。そのdivには、中央に配置できるように幅を割り当てる必要がありますが、このラッパー内のdivの場合、幅を割り当てないと、ブロックレベルの要素であるため、使用可能なスペースが水平方向に自動的に埋められます。さらに、高さが指定されていない場合は、その中のコンテンツに基づいて高さを占めます。したがって、自動的に大きくしたい場合は、高さを指定することはできません。最後に、divが最小の高さを占め、最大の高さより大きくならないようにする場合は、min-heightおよびmax-height cssルールがあります（これらのルールは一部のレガシーブラウザーでは機能しないことに注意してください）。

私の仕事はそのイメージホスト）=をブロックしているので、他の質問に答えることはできません。

于 2012-09-15T22:54:57.800 に答える