Question

我是CSS的完全初学者（这是我写的第一个CSS）和相对初学者的HTML，所以请原谅我，如果我遗漏了一些明显的东西，或者我犯了一些严重的错误。现在，问题是：

我正在尝试创建一个布局，我偶然发现了一个禁止我做我想要的问题。这是我的截图：

The layout as it currently is.

我想要做的只是将div读取为“home”，“blog”等，并使其与下面的div一样宽，有效地使其结束Y作为侧边栏。像这样：

What I want to achieve.

HTML文件的正文包含一个background类div，它负责处理装饰文本，而其他所有不在div的{{1}} container 。 container设置为display: table，其中包含两个div个类row（标记为display: table-row），第一个包含导航div第二个包含主要和侧边栏（所有这些都是section类，标记为display: table-cell）。

以下是整个文件，以显示CSS以及我如何尝试构建HTML：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">


<head>
    <title>mini</title>
    <style type="text/css">

        * {
            font-family: "Ubuntu", Helvetica, Arial, sans-serif;
            margin: 0;
        }

        body {
            padding: 100px 0 0 0;           
            background: white;
            color: #444444;
        }

        h1 {
            font-size: 48px;
            font-weight: bold;
            letter-spacing: -0.083333em;
            line-height: 1.3em;
            text-transform: lowercase;
        }

        p {
            line-height: 1.5em;
        }

        .container {
            overflow: hidden;
            padding: 24px 24px 24px 24px;
            border-spacing: 35px 35px;
            display: table;
        }

        .section {
            position: relative;
            padding: 24px 24px 24px 24px;
            border-width: 1px;
            border-style: solid;
            border-color: #888888;
            background: white;
            display: table-cell;
        }

        .background {
            position: absolute;
            margin: -124px -124px -124px -124px;
            z-index: -1;
            float: right;
            font-size: 54px;
            line-height: 1em;
            font-weight: bold;
            color: #eeeeee;
        }

        .row {          
            display: table-row;
        }

        #sidebar {
            width: 20%;
        }

        #navigation {
            font-size: 24px;
            font-weight: bold;
            text-transform: lowercase;
        }

        #empty {
        }

    </style>
</head>



<body>
    <div id="background" class="background">
        bgtext
    </div>

    <div id="foreground" class="container">
        <div class="row">
            <div id="navigation" class="section">
                navitext
            </div>
        </div>
        <div class="row">
            <div id="mainbody" class="section">
                <h1>Main</h1>
                maintext
            </div>
            <div id="sidebar" class="section">
                <h1>Sidebar</h1>
                sidetext
            </div>
        </div>
    </div>
</body>

</html>

Answer 1

实现此目的的一种方法是围绕所有内容创建一个包装器：

#wrapper {
   width:960px;
   position: relative;
}

<div id="wrapper">

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

   <! -- Other content related divs goes here -->

</div>

header div现在将占用尽可能多的空间，即960px。除非另有说明（这是您正在寻找的），否则同样适用于wrapper div内的其他div。

您可能希望将此div放在margin: 0 auto中心，以使您的网站在更大的屏幕上看起来更好。

祝你好运： - ）

Answer 2

我不完全确定你要做什么，但我认为你的意思是你希望导航栏中的锚点间的间距相等。在这种情况下，没有必要的JavaScript。

我会使用居中的内联块，使用两侧的垫片，以便每个链接之间的距离与边界的填充相同。

参见代码：

<!-- In style: -->
...
#navigation > .spacer {
    display: inline-block;
    width: 5%;
    float: left;
}

#navigation > .navLink {
    display: inline-block;
    width: 22.5%;
    float: left;
    text-align: center;
}
...

...
<!-- Nav bar div -->
<div id="navigation" class="section">
    <div class="spacer">
        &nbsp;
    </div>
    <div class="navLink">
        link1
    </div>
    <div class="navLink">
        link2
    </div>
    <div class="navLink">
        link3
    </div>
    <div class="navLink">
        link4
    </div>
    <div class="spacer">
        &nbsp;
    </div>
</div>
...

根据需要格式化并享受新的导航栏！
希望有所帮助！

Answer 3

您不需要display：table或display：table-cell，因为将它用于模板设计并不是一个好习惯。如果要为单元格填充，则必须最大限度地减小该元素的宽度。以下可能对您有所帮助。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">


<head>
    <title>mini</title>
    <style type="text/css">

        * {
            font-family: "Ubuntu", Helvetica, Arial, sans-serif;
            margin: 0;
        }

        body {
            padding: 100px 0 0 0;           
            background: white;
            color: #444444;
        }

        #wrapper{
            width:80%;
            margin:auto;
        }

        #main{
            width:100%;
        }

        #navigation{
            border:black 1px solid;
            float:left;
            width:96%;
            padding:2%;
            margin-bottom:20px;
        }

        #mainbody{

            border:black 1px solid;
            float:left;
            width:75%;

            height:auto;
        }

         #sidebar{
            border:black 1px solid;
            float:right;
            width:23%;

            height:100%;

        }

    </style>
</head>



<body>
    <div id="wrapper">
        <div id="navigation">
            Home | blog | forum | about
        </div>

        <div id="main">
            <div id="mainbody">
                 <h1>Main</h1>
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br /><br />

            </div>
            <div id="sidebar">
                side bar
            </div>
        </div>
    </div>
</body>

</html>

如何将CSS表行单元格大小与下一行的单元格大小分开？

3 个答案: