0

我无法让我的 div 正确布局。我试图有一个 200px 高并占据 100% 宽度的顶栏。在它下面是一个 200px 宽和 100% 高度的左栏，然后是一个将占据其余空间的右栏。

我在这里做错了什么？

<!DOCTYPE html>
<html>
<head>
    <title>my view</title>

    <style>
        #tb {
            background-color:#cc0000;
            height:200px;
            width:100%;
            position:relative;
        }

        #lb {
            background-color:#00cc00;
            width:200px;
            height:100%;
            float:left;
        }

        #rb {
            background-color:#cccccc;
            height:100%;
            float:right;
        }
    </style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""/>
    <div id="lb"/>
    <div id="rb" style=""/>

</div>
</body>
</html>

当我在 div 中放入一些内容时，它看起来更糟：

<div id="tb" style="">test</div>
    <div id="lb">test</div>
    <div id="rb" style="">test</div>
4

6 回答 6

2

height: 100%或者width: 100%不是其余的大小，而是父级的整体大小，即整个文档。

这是您想要使用表格的示例。

这是一个div的例子。

于 2012-06-28T13:33:25.023 回答
0

如果您想要弹性布局，则为您的包装器 div #page 提供一些最小和最大宽度，那么您设计的顶部标题将根据父 div #page 的宽度进行调整。给包装器 div 指定高度不是一个好主意，但您可以使用最小高度。

于 2012-06-28T13:39:18.747 回答
0

顺便说一句，您不能将 div 设置为自动关闭 -> 这是给您的示例http://jsfiddle.net/QHTeS/2/

#tb {
    background-color:#cc0000;
    height:200px;
    width:100%;
}

#lb{
    float: left;
    background:red;
    width:200px;

}

#rb{

    background:green
}

​</p>

于 2012-06-28T13:39:32.023 回答
0

使用<div>s 和 CSS（即不是表格）- 布局不能以这种方式工作。（另外，正如评论者指出的那样，某些 HTML 是无效的）。

浮动元素的高度主要取决于其中的内容。你已经陷入了认为'height' CSS 声明的意思是你所期望的意思的陷阱。（“忘掉你所学的”）

您将不得不接受正常的 HTML/CSS 流程，即两个较低的 div 将具有不同的高度。但是，您可以使用Faux Columns之类的东西来伪造您想要的效果。

于 2012-06-28T13:43:44.453 回答
-1

第一个 div 是对元素所以<div></div>

div 的流畅布局有点棘手。

这应该适合你：

<!DOCTYPE html>
<html>
<head>
<title>my view</title>

<style>
    html, body {height: 100%;}
    #tb {
        background-color:#cc0000;
        height:200px;
        width:100%;
        position:relative;
    }

    #lb {
        background-color:#00cc00;
        width:200px;
        height:100%;
        float:left;
        margin-left: -200px;
    }

    #rb {
        background-color:#cccccc;
        height:100%;
        float:right;
        width: 100%;
    }

    #content {
        margin-left: 200px; 
        height: 100%;
    }
</style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""></div>
    <div id="content">
       <div id="lb"></div>
       <div id="rb" style=""></div>
    </div>

</div>
</body>
</html>
于 2012-06-28T13:43:28.537 回答
-2

要填充页面的确切部分，您将需要使用绝对定位，因为百分比宽度/高度与父级的大小有关。

<!DOCTYPE html>
<html>
<head>
    <title>my view</title>

    <style>
        #tb {
            background-color:#cc0000;
            position:absolute;
            top:0px;
            left:0px;
            bottom:200px;
            right:0px;
        }

        #lb {
            background-color:#00cc00;
            position:absolute;
            top:200px;
            left:0px;
            bottom:0px;
            right:200px;
        }

        #rb {
            background-color:#cccccc;
            position:absolute;
            top: 200px;
            left:200px;
            bottom:0px;
            right:0px;
        }
    </style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""></div>
    <div id="lb"></div>
    <div id="rb" style=""></div>

</div>
</body>
</html>
于 2012-06-28T13:41:18.013 回答