具有固定宽度子元素的响应式布局-Java 学习之路

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

Layout

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

我想保持“Navigation”div的宽度固定，因此正在应用以下样式：

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

如何在不指定宽度的情况下使“内容”div占用所有剩余空间，同时保持布局响应？

谢谢 .

3 回答

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

回复于 2024-04-18T15:27:12+08:00

0

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

回复于 2024-04-18T15:27:12+08:00
0
这取决于你想要的浏览器支持（需要），IE6中只有3个DIV很难（我认为's actually impossible). You'最好用的是内容的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兼容 .
回复于 2024-04-18T15:27:12+08:00

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

3 回答

相关问题