Question

我是HTML＆amp; CSS和我的第一步是创建像

这样的普通布局

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

为了灵活，Navs宽度不应该固定，内容不应该在它周围浮动。换句话说，导航和内容应该像表格列一样，只是在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>

结果是

uglyNav

我发现的大多数解决方案都使用Nav的固定宽度或内容边距，这不是一个干净的。似乎CSS Multi-column Layout Module或CSS Flexible Box Layout Module可以提供帮助，但它们都是“候选推荐”，因此我无法安全使用它们。什么是解决我问题的正确方法？

Answer 1

标记存在一些严重问题，body标记应包含所有页面元素，基本标记应遵循：

<!DOCTYPE html>
<html>
    <head>
        <!-- meta tags etc -->
    </head> 
    <body>
        <!-- page content -->
    </body>
</html>

至于样式问题，#content div也需要浮动到左侧。还有其他方法，但这可能就足够了。

<!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;
             float: left;
        }

        header {
            background: blue;
        }

        footer {
            clear: both;
            background: #ccc;
        }
        </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">
    <h1>Test</h1>
    <h2>A</h2><h2>C</h2><h2>D</h2>
    </div>
    <footer>
    <p>[Copyright bumf]</p>
    </footer>

  </body>
</html>

Answer 2

~~现在可以在CSS3中使用纯CSS单独执行基于HTML的表格布局。~~（请参阅注释）。

基于HTML的表格布局的纯CSS等价物自2.1版以来一直在CSS规范中。现在大多数浏览器都支持它们。 Here is a good article on this.

支持IE7及以下is limited。

Answer 3

导航和内容应该像表格列

如果你的意思是字面意思，你可以使用表格布局模型（mentioned by Holf）。

请参阅this 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>

Answer 4

我就是这样做的：

示例：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>

Answer 5

您需要更好地了解<div>标签和三种定位方案 - 相对，绝对和固定。

我冒昧地编辑你的代码我的风格，虽然它不包括定位。

<!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>

Answer 6

查看此页面我认为它可以解决您的问题。

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

HTML：非浮动自动宽度导航

6 个答案: