1

我需要 3 个 div，其中 1 个设置为 1000px 的宽度并位于页面中间，另外 2 个应该从主 div 的左右填充屏幕宽度。我希望这适用于所有屏幕分辨率，但我找不到方法。

到目前为止我的代码（我使用颜色作为视觉辅助）-

CSS：

#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }

html:

<html>
<body>
<div id="leftside">&nbsp;</div>
<div id="container">the content</div>
<div id="rightside">&nbsp;</div>
...

到目前为止，它不起作用。如何使“左侧”和“右侧” div 自动调整为屏幕分辨率中剩余的内容 - 对于任何屏幕分辨率？

谢谢您的帮助。

4

3 回答 3

2

您可以通过使用 css 来实现

 #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

    width:calc((100%-1000)/2);
    }
    #rightdiv{

    //other styles
    }
    #leftdiv{

    //other styles
    }

测试浏览器对calc()的支持

于 2013-03-02T09:53:12.660 回答
1

您必须注入一些 javascript 代码：

$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);

看演示

然后在屏幕变小时使用媒体查询来改变中间的宽度。div

于 2013-03-02T09:19:39.163 回答
0

一种方法是将 div 放在一个包含一行和 3 个单元格的表格中。表格的宽度为 100%，您可以设置中心 td 的宽度。

我相信有人会在 CSS 中提出更好的方法。

于 2013-03-02T09:09:49.137 回答