固定宽度的中间div及其两侧各有两个弹性宽度的div [英] Fixed-width middle div and two elastic-width divs either side of it
问题描述
我正在尝试创建一种布局，其中一个div内有三个div，它们会填满页面的100％宽度.中间的div具有固定的宽度，两个外部的div将分别占剩余空间的50％.使用CSS可以实现吗?
I am trying to create an arrangement whereby there are three divs within a div that fills up 100%-width of a page. The middle div will have a fixed width and the two outer divs will take up 50% each of the remaining space. Is this achievable using CSS?
我已经设置了一个小提琴，但没有用， http://jsfiddle.net/6y5hn/通过以下代码尝试实现这一目标:
I have set up a fiddle, that doesn't work, http://jsfiddle.net/6y5hn/ with my attempt at achieving this, with the following code:
<div id="outerbox">
<div id="leftbox">(elastic width) This should occupy all the space in the grey box to the left of the red box</div>
<div id="centerbox">(fixed-size) should be in the center of the grey box</div>
<div id="rightbox">(elastic width) This should occupy all the space in the grey box to the right of the red box</div>
</div>
使用CSS:
#outerbox {
background-color:gray;
margin-top:50px;
width:100%;
height:200px;
}
#centerbox {
background-color:red;
margin-left:auto;
margin-right:auto;
float:left;
height:100px;
width:300px;
}
#leftbox {
background-color:yellow;
height:300px;
float:left;
}
#rightbox {
background-color:pink;
height:300px;
float:left;
}
詹姆斯
推荐答案
不确定仅使用CSS是否可以实现，但这是一个方便的JavaScript代码段，可帮助您更有效地管理固定的和基于百分比的页面宽度:
Not sure if this is achievable using only CSS, but here's a handy snippet of JavaScript code that can help you manage fixed and percent-based page widths more effectively:
function resize() {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
}
然后可以在页面加载以及页面调整大小时调用resize()函数.像这样:
You can then call the resize() function on page load, as well as on page resize. So something like:
<body onload="resize()">
在这里，由于您具有页面的计算宽度，因此可以相应地调整各个div的大小:
From here, because you have a calculated width of the page, you can resize your individual divs accordingly:
document.getElementById("leftbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("rightbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("centerbox").style.width = 300 + "px";
centerbox保持固定为300像素，而leftbox和rightbox的宽度等于屏幕宽度减去300像素，然后除以2.
The centerbox maintains a fixed with of 300 pixels, while leftbox and rightbox have widths equal to the width of the screen minus 300 pixels, divided by two.
这篇关于固定宽度的中间div及其两侧各有两个弹性宽度的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
