0

我有一个小问题。我正在处理的网页包含三个区域：

  • 在左侧导航，应始终在左侧
  • 中间的内容区域，应该总是在浏览器的中间
  • 右侧的徽标区域，应始终位于右上角

这是我现在拥有的代码：

CSS

html, body
    {
        height: 100%;
        min-height:100%;
        padding: 0em;
        margin: 0em;
    }

body 
{
    font-family: Segoe UI, Arial;
    font-size: 12px;
    color: #616a71;
    line-height: 15px;
    letter-spacing: 0.5px;
    overflow-y: scroll;
    background-color: #CCC;
}

div#navigation
{
    position: absolute;
    float: left;
    width: 220px;
    left: 5px;
    top: 70px;
    z-index: 2;
    padding-bottom: 50px;
    background-color: red;
}

div#content
{
    position: relative;
    width: 1014px;
    margin: 0 auto;
    top: 70px;
    padding: 10px;
    background-color: #f6f6f3;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border-radius: 2px;
    line-height: 20px;
}

div#right
{
    position: absolute;
    width: 258px;
    right: 0;
    top: 0;
    background-color: green;
}

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>header</title>
    <link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="navigation">
        nav
    </div>
    <div id="content">
        content
    </div>
    <div id="right">
        logo
    </div>
</body>
</html>

现在，当我调整浏览器的大小时，内容区域位于导航的后面。我想要实现的是，当导航和内容区域并排显示的空间太少时，应该出现浏览器的水平滚动条。

4

2 回答 2

0

尝试将 div 的宽度指定为 %。

div#navigation
{
    width: 20%;
}

div#content
{
    width: 60%;
}

div#right
{
    width: 20%;
}

并将它们全部向左浮动。

于 2013-07-31T12:56:14.580 回答
0

通过使用下面指定的 CSS 媒体查询

@media (max-width: 600px) {
 // Your code goes here
}

您可以指定用于这些宽度的 CSS。相应地更改宽度

于 2013-07-31T12:47:34.453 回答