4

左右の div に自動幅を設定して、常に中央の div にアタッチされるようにしようとしています。以下の私の例ではwidth: 20%;、動的にする必要がある左右の div を使用しています。どうすればそれを達成できますか?

これら ( 1、2、3 ) のアイデアの例を調べましたが、問題を解決できませんでした。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>
4

4 に答える 4

0

本当に真ん中を固執したい場合は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-11T13:06:05.733 に答える
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の回答を参照

"center" div 内に新しい div を追加し、クラスを適用します。

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

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

于 2013-01-11T13:00:30.877 に答える