1

私は HTML と CSS が初めてで、最初のステップの 1 つは、次のような通常のレイアウトを作成することです。

/----------------\
|     Header     |
|----------------|
| N  |           |
| a  |   Content |
| v  |           |
|----------------|
|   Foot         |
\----------------/

柔軟性を持たせるために、ナビゲーションの幅は固定せず、コンテンツがその周りに浮かないようにする必要があります。言い換えれば、Nav と Content はテーブルの列のように動作する必要がありますが、HTML では書式設定にテーブルを使用することは大したことではありません。私の現在のコードは次のようになります。

<!DOCTYPE html>
<html>
    <head>
      <title>Todo list</title>
        <style type="text/css">
        nav {
            float: left;
            padding-right: 5px;
            margin-right: 5px;
            background: yellow;
            height: auto;       /* auto | inherit | 100% */
            width: auto;
        }

        #content {
             margin: 5px;
             padding-left: 5px;
        }

        header {
            background: blue;
        }

        footer {
            clear: both;
            background: #ccc;
        }

        .clearfix:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
                }
        </style>
    </head> 


  <body>
    <header>
        Head
    </header>

    <nav id="main_nav">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/contact">Contact (p)</a></li> 
            <li><a href="/temp">Temp</a></li>   
        </ul>
    </nav>

    <div id="content" class="clearfix">
        <h1>Test</h1>
        <h2>A</h2><h2>C</h2><h2>D</h2>
    </div>

    <footer>
        <p>[Copyright bumf]</p>
    </footer>
  </body>
</html>

その結果、

醜いNav

私が見つけたほとんどのソリューションは、Nav または Content マージンに固定幅を使用していましたが、これはクリーンではありません。CSS Multi-column Layout ModuleやCSS Flexible Box Layout Moduleが役に立ちそうですが、どちらも「推奨候補」なので安心して使えません。私の問題を解決する適切な方法は何ですか?

4

6 に答える 6

2

Nav と Content は、テーブルの列のように動作する必要があります

これを文字通り意味する場合は、テーブル レイアウト モデルを使用できます ( Holf が言及)。

この jsFiddleまたは次のコードを参照してください。

nav {
    display: table-cell;
    padding-right: 5px;
    background: yellow;
    white-space: nowrap; /* Prevent nav from ever inserting line breaks between words (like before "(p)"). */
}

#content {
    display: table-cell;
    padding-left: 5px;
    width: 100%; /* Because of table layout, this will shrink nav to the smallest width its content can handle (similarly to how float widths work). */
}

header {
    background: blue;
}

#main {
    display: table;
    width: 100%;
}

footer {
    background: #ccc;
}

<header>
    Head
</header>

<div id="main">
    <nav id="main_nav">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/contact">Contact (p)</a></li> 
            <li><a href="/temp">Temp</a></li>   
        </ul>
    </nav>

    <div id="content" class="clearfix">
        <h1>Test</h1>
        <h2>A</h2><h2>C</h2><h2>D</h2>
    </div>
</div>

<footer>
    <p>[Copyright bumf]</p>
</footer>
于 2013-05-16T23:43:15.407 に答える
2

CSS3 では、純粋な CSS のみを使用して、HTML ベースのテーブル レイアウトと同等の処理を実行できるようになりました。（コメントを参照）。

HTML ベースのテーブル レイアウトに相当する純粋な CSS は、バージョン 2.1 以降の CSS 仕様に含まれています。それらは現在、ほとんどのブラウザーで適切にサポートされています。これについては良い記事があります。

IE7 以下のサポートは限定的です。

于 2013-05-16T22:54:31.580 に答える
1

これは私がそれを行う方法です：

例: jsFiddle

HTML:

<div id="header">Header</div>
<div id="main">
  <div id="nav">
    <div class="wrapper">Nav</div>
  </div>
  <div id="content">
    <div class="wrapper">Content</div>
  </div>
</div>
<div id="footer">Footer</div>

CSS:

<style>
html, body{height:100%; margin:0; padding: 0; background:#ccc;}
#header{ background: #0cc; height:50px; position: absolute; width:100%;}
#main, #content, #nav{ width:100%; height:100%;}
#content{ background: #555; width:75%; float:left;}
#nav{ background: transparent; width:25%; float:left;}
.wrapper{padding: 50px 15px;}
#footer{background: #fcc;  height: 50px; position: fixed; bottom: 0; width: 100%;}
</style>
于 2013-05-16T23:08:30.543 に答える
0

このページをチェックすると、問題が解決すると思います。

http://www.tutorialrepublic.com/html-tutorial/html-layout.php

于 2013-05-20T05:41:29.817 に答える
0

<div>タグと 3 つの配置スキーム (相対、絶対、固定)について理解を深める必要があります。

ポジショニングは含まれていませんが、私はあなたのコードを私のスタイルで自由に編集しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style type="text/css">
    body,
    html {
        margin:0;
        padding:0;
        color:#000;
        background:#a7a09a;
    }
    #wrap {
        width:750px;
        margin:0 auto;
        background:#99c;
    }
    #header {
        padding:5px 10px;
        background:#ddd;
    }
    h1 {
        margin:0;
    }
    #nav {
        padding:5px 10px;
        background:grey;
    }
    #nav ul {
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li {
        display:inline;
        margin:0;
        padding:0;
    }
    #sidebar {
        float:left;
        width:230px;
        padding:10px;
        background:yellow;
        height:100%;
    }
    h2 {
        margin:0 0 1em;
    }
    #main {
        float:right;
        width:480px;
        padding:10px;
        background:red;
    }
    #footer {
        clear:both;
        padding:5px 10px;
        background:#cc9;
    }
    #footer p {
        margin:0;
    }
    * html #footer {
        height:1px;
    }
    </style>
</head>
<body>
<div id="wrap">
    <div id="header"><h1>header goes here</h1></div>
    <div id="nav">
        <ul>
            <li><a href="/">Options</a></li>

        </ul>
    </div>
    <div id="sidebar">
        <h2>Siidebar</h2>
        <p><a href="/">Home</a></p>
        <p><a href="/">Content</a></p>
        <p><a href="/">Content</a></p>
        <p><a href="/">Content</a></p></div>

    <div id="main">
        <h2>Main Content</h2>
        <p>Hello</p>
        <ul>
            <li><a href="/">Link 1</a></li>
            <li><a href="/">Link 2</a></li>
            <li><a href="/">Link 3</a></li>

        </ul>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>
</body>
</html>
于 2013-05-16T23:53:46.553 に答える