4

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

我查看了这些 ( 1 , 2 , 3 ) 示例以获取想法，但无法解决我的问题。3rd 是我想要的，但它不适用于所有浏览器。

随意更改下面的整个代码，因为我愿意寻求更好的解决方案，但中心 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>
4

4 回答 4

0

这是工作演示

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
}
于 2013-01-11T12:49:04.707 回答
0

以百分比为中心 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>
于 2013-01-11T12:55:02.567 回答
0

见@Ence答案

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

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

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

于 2013-01-11T13:00:30.877 回答
0

如果你真的想坚持850px中间，你将不得不计算整个文档的宽度，因此使用一点javascript：小提琴

这是非常基本的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，则左右菜单消失。

于 2013-01-11T13:06:05.733 回答