HTML：非浮动自动宽度导航_Html_Css_Css Float_Autosize

HTML：非浮动自动宽度导航

html css

HTML：非浮动自动宽度导航,html,css,css-float,autosize,Html,Css,Css Float,Autosize,我不熟悉HTML和CSS，我的第一步就是创建一个普通的布局，比如 /----------------\ | Header | |----------------| | N | | | a | Content | | v | | |----------------| | Foot | \----------------/ 为了灵活，导航宽度不应固定，内容也不应在其周围浮动。换句话说，Nav和内容的行为应该类似于

我不熟悉HTML和CSS，我的第一步就是创建一个普通的布局，比如

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

为了灵活，导航宽度不应固定，内容也不应在其周围浮动。换句话说，Nav和内容的行为应该类似于表列，只是使用表进行格式化在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>


任务清单
导航{
浮动：左；
右侧填充：5px；
右边距：5px；
背景：黄色；
高度：自动；/*自动|继承| 100%*/
宽度：自动；
}
#内容{
保证金：5px；
左侧填充：5px；
}
标题{
背景：蓝色；
}
页脚{
明确：两者皆有；
背景：#ccc；
}
.clearfix:之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
头





试验
ACD
[版权所有]

导致

我发现的大多数解决方案要么使用固定宽度的导航，要么使用内容边距，这不是一个干净的方法。这似乎有帮助，但它们都是“候选推荐”，所以我不能安全地使用它们。解决我的问题的正确方法是什么？

现在，在CSS3中，仅使用纯CSS就可以实现基于HTML的表格布局。（见评论）

从2.1版开始，CSS规范中就出现了基于HTML的表格布局的纯CSS等价物。它们现在在大多数浏览器中都得到了很好的支持

支持IE7及以下版本。

现在，在CSS3中，仅使用纯CSS就可以实现基于HTML的表格布局。（见评论）

从2.1版开始，CSS规范中就出现了基于HTML的表格布局的纯CSS等价物。它们现在在大多数浏览器中都得到了很好的支持

支持IE7及以下版本。

您的标记存在一些严重问题，

正文

标记应包装所有页面元素，基本标记应如下所示：

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

您的标记存在一些严重问题，

body

标记应包装所有页面元素，基本标记应如下所示：

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

我会这样做：

例如：

HTML:

标题
导航
内容
页脚

CSS:


html，正文{高度：100%；边距：0；填充：0；背景：#ccc；}
#标题{背景：#0cc；高度：50px；位置：绝对；宽度：100%；}
#主要内容，导航{宽度：100%；高度：100%；}
#内容{背景：#555；宽度：75%；浮动：左；}
#导航{背景：透明；宽度：25%；浮动：左侧；}
.wrapper{padding:50px 15px；}
#页脚{背景：fcc；高度：50px；位置：固定；底部：0；宽度：100%；}

我会这样做：

例如：

HTML:

标题
导航
内容
页脚

CSS:


html，正文{高度：100%；边距：0；填充：0；背景：#ccc；}
#标题{背景：#0cc；高度：50px；位置：绝对；宽度：100%；}
#主要内容，导航{宽度：100%；高度：100%；}
#内容{背景：#555；宽度：75%；浮动：左；}
#导航{背景：透明；宽度：25%；浮动：左侧；}
.wrapper{padding:50px 15px；}
#页脚{背景：fcc；高度：50px；位置：固定；底部：0；宽度：100%；}

导航和内容的行为应类似于表列

如果您是字面意思，那么可以使用表布局模型（as）

请参阅或输入以下代码：

nav{
显示：表格单元格；
右侧填充：5px；
背景：黄色；
空白：nowrap；/*防止nav在单词之间插入换行符（如“（p）”之前）*/
}
#内容{
显示：表格单元格；
左侧填充：5px；
宽度：100%；/*由于表格布局的原因，这会将nav缩小到其内容可以处理的最小宽度（类似于浮动宽度的工作方式）*/
}
标题{
背景：蓝色；
}
#主要{
显示：表格；
宽度：100%；
}
页脚{
背景：#ccc；
}


头





试验
ACD
[版权所有]

导航和内容的行为应类似于表列

如果您是字面意思，那么可以使用表布局模型（as）

请参阅或输入以下代码：

nav{
显示：表格单元格；
右侧填充：5px；
背景：黄色；
空白：nowrap；/*防止nav在单词之间插入换行符（如“（p）”之前）*/
}
#内容{
显示：表格单元格；
左侧填充：5px；
宽度：100%；/*由于表格布局的原因，这会将nav缩小到其内容可以处理的最小宽度（类似于浮动宽度的工作方式）*/
}
标题{
背景：蓝色；
}
#主要{
显示：表格；
宽度：100%；
}
页脚{
背景：#ccc；
}


头





试验
ACD
[版权所有]

您需要更好地理解

标签和三种定位方案-相对、绝对和固定

我已经以我的风格自由地编辑了您的代码，尽管它不包括定位

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


身体，
html{
保证金：0；
填充：0；
颜色：#000；
背景：#a7a09a；
}
#包裹{
宽度：750px；
保证金：0自动；
背景：#99c；
}
#标题{
填充物：5px10px；
背景：ddd；
}
<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>

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