我想在网页(HTML5和CSS3)中实现以下响应式布局:
所有三个div标签都包含在最大宽度为960px的div中;
我想保持“Navigation”div的宽度固定,因此正在应用以下样式:
width:90px; float:left; padding:5px;
如何在不指定宽度的情况下使“内容”div占用所有剩余空间,同时保持布局响应?
谢谢 .
#content{ margin: 0 0 0 90px; padding: 10px 30px; }
只需将所有内容放入包装器div中,并将其宽度指定为960px
这取决于你想要的浏览器支持(需要),IE6中只有3个DIV很难(我认为's actually impossible). You'最好用的是内容的DIV上的CSS calc 方法 width: calc(100% - 90px); CSS calc 方法有IE9支持所以你需要考虑到这一点,在IE8中 - 你仍然需要使用百分比 .
calc
width: calc(100% - 90px);
如果您想知道如何分离IE9代码,那么只需使用 @media ,如下所示:
@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,因此宽度不会受到填充的影响,但这很容易添加,所以我会留给你 .
margin-left: -90px
padding-left: 90px;
如果您将使用另一个容器DIV作为内容,那么该解决方案将是IE6兼容,而我给你的是IE8兼容 .
3 回答
只需将所有内容放入包装器div中,并将其宽度指定为960px
这取决于你想要的浏览器支持(需要),IE6中只有3个DIV很难(我认为's actually impossible). You'最好用的是内容的DIV上的CSS
calc
方法width: calc(100% - 90px);
CSScalc
方法有IE9支持所以你需要考虑到这一点,在IE8中 - 你仍然需要使用百分比 .如果您想知道如何分离IE9代码,那么只需使用
@media
,如下所示:@media
是IE9兼容的,因为IE8-不能做它的正面或反面它不会影响它们 . 因此将IE9代码放入其中是安全的 .如果您可以稍微修改HTML,我会建议如下:
注意内容是如何有一个单独的容器,以一种方式浮动,导航器以另一种方式浮动,这是为了确保它们不在同一平面上 .
#c_container有
margin-left: -90px
将它带到与导航器相同的行和padding-left: 90px;
以确保#c(新内容DIV)现在可见 . #c_container也有#c_container DIV . 没有它你将需要另一个容器DIV,因此宽度不会受到填充的影响,但这很容易添加,所以我会留给你 .如果您将使用另一个容器DIV作为内容,那么该解决方案将是IE6兼容,而我给你的是IE8兼容 .