个人中心
gpt4 book ai didi

html - XHTML/CSS 3 列问题

转载 作者：太空宇宙 更新时间：2023-11-03 19:17:26 25 4
gpt4 key购买 nike

我是编码、XHTML、CSS 和 PHP 领域的新手。这是我第一次尝试根据我对 CSS 的最低限度的了解来构建一个我理解的 3 列布局。

我感到困惑的是使用 overflow: auto 以及构建文档。

例如，我正在阅读教程 http://www.icms.info/website-howto/css-tutorial我认为这是令人费解的。因此，我根据我所知道的创建了一个 3 列布局。我更改了内容 div 标签的位置，使其刚好位于页脚 div 标签上方，而不是出现在导航上方。因此我的困惑是

问题一

为什么我必须更改我的内容 div 标签的位置(正如文章建议内容 div 标签位于导航 div 标签之上)？

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

        <div id="content">
            content
        </div>

        <div id="navigation">
            navigation
        </div>

        <div id="news">
            news
        </div>

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

到

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

    <div id="navigation">
        navigation
    </div>

    <div id="news">
        news
    </div>

    <div id="content">
        content
    </div>

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

问题二

为什么我不能在容器 ID 选择器中使用声明 overflow: auto 即

#container {

            width: 750px;
            margin: 0px auto;
            border: 1px dashed #000000;
            overflow: auto;

        }

并且不得不求助于页脚选择器中的clear: both？

完整代码

<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />

<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />

<title>Sample</title>

<link rel="stylesheet" type="text/css" href="web.css" />

<style type="text/css" media="all">

    * {
        margin: 0;
        padding: 0;
    }

    body {

        background-color: #eeeeee;
        font-family: arial, sans-serif;
        font-size: medium;

    }

    #container {

        width: 750px;
        margin: 0px auto;
        border: 1px dashed #000000;

    }

    #header {

        height: 120px;
        background-color: gray;

    }

    #content {

        background-color: red;
        width: 715px;
        text-align: center;

    }


    #navigation {

        background-color: orange;
        float: left;

    }

    #news {

        background-color: blue;
        float: right;

    }

    #footer {

        background-color: green;
        clear: both;
    }

</style>

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

    <div id="navigation">
        navigation
    </div>

    <div id="news">
        news
    </div>

    <div id="content">
        content
    </div>

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

编辑

@Phil.Wheeler 这就是我的起点；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Sample</title>

    <link rel="stylesheet" type="text/css" href="web.css" />

    <style type="text/css" media="all">

        * {
            margin: 0;
            padding: 0;
        }

        body {

            background-color: #eeeeee;
            font-family: arial, sans-serif;
            font-size: medium;

        }

        #container {

            width: 750px;
            margin: 0px auto;
            border: 1px dashed #000000;
            overflow: auto;

        }

        #header {

            height: 120px;
            background-color: gray;

        }

        #content {

            background-color: red;
            width: 715px;
            text-align: center;

        }


        #navigation {

            background-color: orange;
            float: left;

        }

        #news {

            background-color: blue;
            float: right;

        }

        #footer {

            background-color: green;
        }

    </style>

</head>

<body>

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

        <div id="content">
            content
        </div>

        <div id="navigation">
            navigation
        </div>

        <div id="news">
            news
        </div>


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

</body>

最佳答案

正如您在开场白中指出的那样，您是编码新手，因此一些 HTML/CSS 结构规则可能看起来有点违反直觉。

我会先回答你的第二个问题，因为它是最直接的。 “溢出”属性的使用指示您的浏览器应该如何显示超出其所包含元素边界的任何内容。例如，如果您有一个 <div>。元素高 100 像素，但您的内容是超过 100 像素的完整段落:

  • overflow: visible将显示所有内容溢出您的 div 的边界.
  • overflow: hidden将扩展您的 div 的大小包含您的所有内容(只要没有其他父规则阻止或覆盖此行为)。
  • overflow: scroll将显示滚动条，以便用户可以在 div 中上下(或左右)滚动.
  • overflow: auto将向 div 添加滚动条仅当其内容超过其固定大小时。

Read more about the overflow property here .

关于您的三列布局，您会发现稍微更改您的 CSS 规则并稍微修改您的 HTML 结构将使生活变得更加轻松，而不必依赖 overflow。或 clear样式中的属性。我假设您的列是内容、导航和新闻。

看看这个例子:

    <div class="leftCol">
        <h2>Left Column</h2>
        <p>Left column is 250px by default. It can be extended by applying other classes.</p>
        <ul>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
    </div>
    <div class="rightCol">
        <h2>Right Column</h2>
        <p>The right column is by default 300px wide. It can be extended by applying other classes.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
        </ul>
    </div>
    <div class="main">
        <h2>Main Content</h2>
        <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of “leftCol” and “rightCol” are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
    </div>

请注意，我按以下顺序放置 float 列:左、右、主。我的主栏只占用两个侧栏之间的任何空间。这是执行此操作的 CSS:

.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}
.main{display:table-cell;*display:block;width:auto;}

我不需要使用 overflow 或 clear 来实现这一点，无论我将这三个元素放在哪个容器中，一切都会很好地布局。

希望这对您有所帮助。

关于html - XHTML/CSS 3 列问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5972717/

25 4 0
文章推荐： c# - PDFSharp 不工作
文章推荐： matlab - MATLAB中乐器的 "Tone"比较
文章推荐： c# - 继承 XmlSerializer C#
文章推荐： html - 如何适应超出页脚的内容，即使用 CSS 和 Div 标签溢出？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com