左右 div 附加到中间 div答案

【问题标题】：left and right divs attached to middle div左右 div 附加到中间 div
【发布时间】：2014-10-26 07:43:19
【问题描述】：

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

我研究了这些（1、2、3）示例以获取想法，但无法解决我的问题。 3rd 是我想要的，但它不适用于所有浏览器。

请随意更改下面的整个代码，因为我愿意寻求更好的解决方案，但中心 div 必须为 850 像素。

谢谢

<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>

【问题讨论】：

我真正想要的是在扩展的同时带上border-bottom lines互相接触。正如我所说，我愿意寻求更好的解决方案。
下面给出的javascript解决方案怎么样？我不确定是否只能使用 css ..！
正如你提到的，div 在狭窄的视图中一个在另一个之下。
我更新了我的答案；现在，如果视图变窄，左侧和右侧的菜单就会消失。
屏幕大时左右不展开:)

标签： css layout html

【解决方案1】：

如果你真的想坚持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，则左右菜单消失。

【讨论】：

【解决方案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>

【讨论】：

整个东西必须扩展。你的没有。右div右侧空间很大。

【解决方案3】：

查看@Ence 答案

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

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

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

【讨论】：

如果我设置border-bottom lines 那么#middle div 在大屏幕中将在其旁边有空格。我在原来的帖子中添加了一条新评论。
如果你不希望中间收缩，边不能是 20% 的宽度。为什么需要 20% 的宽度？

【解决方案4】：

这是工作 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
}

【讨论】：

恐怕必须是 850px。
虽然左边没有缩小！
现在一切都搞砸了。跳转到下一行等。
我认为答案中的演示是最好的