左，右divs附加到中間格

我想設置自動寬度的左，右divs，以便他們總是附加到居中的div。我的下面的例子使用width: 20%;左右div應該是動態的。我怎麼能做到這一點？左，右divs附加到中間格

我看着這些（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>

來源

2013-01-11 BentCoder

我真正想要的是讓'border-bottom lines'在展開時互相接觸。正如我所說，我願意提供更好的解決方案。 – BentCoder

javascript解決方案給出瞭如何？我不確定這是可能的只有使用CSS ..！ – leMoisela

正如你所提到的，divs在狹隘的視野下走在另一個之下。 – BentCoder

如果你真的要堅持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，則左右菜單消失。

來源

2013-01-11 13:06:05 leMoisela

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

來源

2013-01-11 12:49:04 Enve

恐怕它必須是850px。 – BentCoder

我編輯了答案。 – Enve

儘管不縮小！ – BentCoder

添加寬度居中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-11 12:55:02

整個東西必須擴大。你的不是。右側div有大量空間右側。 – BentCoder

看到@Ence答案

現在只需添加一個新的div裏面的「中心」的div和應用類：

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

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

來源

2013-01-11 13:00:30

它不工作'＃center'需要850px – Enve

如果我設置了'border-bottom lines'，那麼'＃middle' div會在大屏幕旁邊有空格。我在原始帖子中添加了新評論。 – BentCoder

只需將200像素更改爲850像素... – 2013-01-11 14:15:52

左，右divs附加到中間格

回答

相關問題