Question

我正在尝试为左右div设置自动宽度，以便它们始终连接到居中的div。我的下面示例使用width: 20%;表示左侧和右侧div，它们应该是动态的。我怎么能做到这一点？

我查看了这些（1，2，3）示例，但无法解决我的问题。第三是我想要的，但它并不适用于所有浏览器。

随意更改整个代码，因为我打开了更好的解决方案，但中心div必须是850px。

由于

<style>
body
{
    background: #333333;
}
*
{
    margin: 0;
    padding: 0;
}
#cover
{
    float: left;
    width: 100%;
    height: 200px;
    background: #bababa;
}
#left
{
    float: left;
    width: 20%;
    height: 200px;
    background: #cccccc;
}
#center
{
    float: left;
    width: 850px; /*compulsory*/
    height: 200px;
    background: #dddddd;
}
#right
{
    float: right;
    width: 20%;
    height: 200px;
    background: #eeeeee;
}
</style>



<div id="cover">
    <div id="left">LEFT</div>
    <div id="center">CENTER</div>
    <div id="right">RIGHT</div>
</div>

Answer 1

以下是工作 DEMO

<强> CSS

body
{
    background: #333333;
}
*
{
    margin: 0;
    padding: 0;
}
#cover
{
    float: left;
    width: 100%;
    min-width:1420px;
    height: 200px;
    background: #bababa;
}
#left
{
    float: left;
    width: 20%;
    height: 200px;
    background: #cccccc;
    left:0
}
#center
{
    float: left;
    min-width:850px;
    width: 60%;
    height: 200px;
    background: #dddddd;

}
#right
{
    float: right;
    width: 20%;
    height: 200px;
    background: #eeeeee;

    right:0
}

Answer 2

将宽度添加到中心div的百分比，如

 <style>
body
{
    background: #333333;
}
*
{
    margin: 0;
    padding: 0;
}
#cover
{
    float: left;
    width: 100%;
    height: 200px;
    background: #bababa;
}
#left
{
    float: left;
    width: auto;
    height: 200px;
    background: #cccccc;
}
#center
{
    float: left;
    width: 850px; /*compulsory*/
    height: 200px;
    background: #dddddd;
}
#right
{
    float: left;
    width: auto;
    height: 200px;
    background: #eeeeee;
}
</style>



<div id="cover">
    <div id="left">LEFT</div>
    <div id="center">CENTER</div>
    <div id="right">RIGHT</div>
</div>

Answer 3

参见@Ence的回答

现在只需在“center”div中添加一个新的div并应用该类：

#middle{
  width: 200px;
  background: #f90;
  margin:auto;
}

例如： http://jsfiddle.net/vSvTZ/

Answer 4

如果你真的想要坚持中间的850px，你必须计算整个文档的宽度，因此使用一点点javascript：Fiddle

这是非常基本的javascript部分。

function menuresize(){
  var windowWidth = document.body.offsetWidth;
  var menusSize = (windowWidth-850)/2;
  if(menusSize<1){
    document.querySelector('#left').style.display = 'none';
    document.querySelector('#right').style.display = 'none';
  }else{
    document.querySelector('#left').style.width = menusSize+'px';
    document.querySelector('#right').style.width = menusSize+'px';
    document.querySelector('#left').style.display = 'block';
    document.querySelector('#right').style.display = 'block';
  }
}
menuresize();
window.onresize = function(e){menuresize();}

如果页面更薄或等于850px，则左右菜单会消失。

左右div连接到中间div

4 个答案: