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

Question

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

我正在尝试创建一个布局，但偶然发现了一个禁止我做我想做的事情的问题。这是我所拥有的屏幕截图：

目前的布局。

我想要做的只是简单地把div“家”、“博客”等写成和div下面的一样宽，有效地使它在与侧边栏相同的 Y 处结束。像这样：

我想要达到的目标。

HTML 文件的主体包含一个backgroundclass div，它负责装饰文本，而所有不存在的内容都在另一个div名为container. container设置为display: table并在其中包含两个divclass row（标记 a display: table-row），第一个包含导航div，第二个包含主要和侧边栏（所有这些都是 class 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>

score 3 · Accepted Answer

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

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

<div id="wrapper">

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

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

</div>

div 现在将header占用尽可能多的空间，即960px. 这同样适用于 div 内的其他wrapperdiv，除非另有说明（这是您要查找的内容）。

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

祝你好运:-)

score 2 · Accepted Answer

我不完全确定您要做什么，但我认为您的意思是您希望导航栏中的锚点之间的间距相等。在这种情况下，不需要 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>
...

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

score -1 · Accepted Answer

您不需要 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>

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

3 回答 3

Related

Reference