Question

我想在网页（HTML5和CSS3）中实现以下响应式布局：

Layout

所有三个div标签都包含在最大宽度为960px的div中;

我想保持＆＃34;导航＆＃34;的宽度。因此，div固定了以下样式：

width:90px; float:left; padding:5px;

如何制作＆＃34;内容＆＃34; div在没有指定宽度的情况下占用所有剩余空间，同时保持布局响应？

谢谢。

Answer 1

#content{
    margin: 0 0 0 90px;
    padding: 10px 30px;
}

Answer 2

将所有内容放入包装器div并将其宽度指定为960px

Answer 3

这取决于你想要的浏览器支持（需要），IE6 +中只有3个DIV很难（我认为它实际上是不可能的）。您最好的选择是在内容的DIV上使用CSS calc方法 width: calc(100% - 90px); CSS calc方法具有IE9 +支持，因此您需要考虑到这一点，在IE8中 - 您仍然需要使用百分比。

如果您想知道如何分离IE9 +代码，那么只需使用@media，例如：

    @media all {
        #navigator {
            width: 90px;
        }
        #content {
            width: calc(100% - 90px);
        }
    }

@media是IE9 +兼容的，因为IE8-不能做它的正面或反面，它不会影响它们。因此，将IE9 +代码放入其中是安全的。

如果您可以稍微修改HTML，我会建议以下内容：

<html>
<head>
    <style type="text/css">
        #h {
            background: #f00;
        }   
        #n {
            background: #0f0;
            width: 90px;
            float: left;
        }   
        #c_container {
            background: #005;
            width: 100%; 
            float: right;
            margin: 0 0 0 -90px;
            padding-left: 90px; 
            box-sizing: border-box;
        }
        #c {
            background: #00f;
            height: 50px;

        }
        #container {
            max-width: 940px;
            margin: 0 auto 0 auto;
        }
    </style>
</head> 
<body>
    <div id="container">
        <div id="h">head</div><div id="c_container"><div id="c">cont</div></div><div id="n">nav</div>
    </div>      
</body>

注意内容如何有一个单独的容器，以单向浮动，导航器以另一种方式浮动，这是为了确保它们不在同一架飞机。

#c_container有一个margin-left: -90px可以将它与导航器放在同一行，而padding-left: 90px;可以确保#c（新内容DIV）现在可见。 #c_container也有#c_container DIV。没有它你将需要另一个容器DIV，因此宽度不会受到填充的影响，但这很容易添加，所以我会留给你。

如果您使用另一个容器DIV作为内容，那么该解决方案将是IE6 +兼容，而我给你的是IE8 +兼容。

具有固定宽度子元素的响应式布局

3 个答案: