左右两个div与中间的div相连

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>

- BentCoder

---

正如您所提到的，在窄视图下，div会一个接一个地排列。 - BentCoder

测试所有浏览器和不同屏幕。 - BentCoder

“querySelector”是我代码中使用的最新命令，它可以在IE8+和其他所有浏览器上运行。因此，如果您已经激活了JavaScript，它应该可以正常工作！您确定您查看了最新更新http://jsfiddle.net/9uPe2/3/吗？ - leMoisela

我确定。中心和右侧div之间有巨大的空间。左侧和右侧div可能会消失，但不会扩展。 - BentCoder

根据您的目标浏览器，您可能可以使用Flexbox（http://umaar.github.com/css-flexbox-demo/）。 - Tom Pietrosanti

Answer 1

这里是可工作的演示

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
}

- Idrizi.A

---

恐怕必须是850像素。 - BentCoder

左边不会收缩！ - BentCoder

现在一切都乱了。跳到下一行等等。 - BentCoder

我认为答案中的演示是最好的。 - Idrizi.A

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>

- Rupali Shinde

---

整个布局应该要扩展，你的布局没有扩展。右侧div右边有大量的空白空间。 - BentCoder

Answer 3

看看 @Ence 的答案

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

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

example: http://jsfiddle.net/vSvTZ/

- user1737988

---

如果我设置 border-bottom 样式，那么在大屏幕上 #middle div 旁边会有空白。我在原帖中添加了一条新评论。 - BentCoder

如果你不想让中间部分缩小，两侧就不能是20％的宽度。你为什么需要20％的宽度？ - user1737988

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，左右菜单将消失。

- leMoisela