1

3つのdivが必要です。そのうちの1つは1000pxの幅に設定されてページの中央にあり、他の2つはメインのdivの左右から画面の幅を埋める必要があります。これをすべての画面解像度で機能させたいのですが、その方法が見つかりません。

これまでの私のコード（視覚的な補助として色を使用しました）-

css：

#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }

html：

<html>
<body>
<div id="leftside">&nbsp;</div>
<div id="container">the content</div>
<div id="rightside">&nbsp;</div>
...

これまでのところ、それは機能していません。「左側」と「右側」のdivを画面解像度に残っているものに自動的に調整するにはどうすればよいですか？どの画面解像度でも？

助けてくれてありがとう。

4

3 に答える 3

2

あなたはcssでこれを行うことによって達成することができます

 #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

    width:calc((100%-1000)/2);
    }
    #rightdiv{

    //other styles
    }
    #leftdiv{

    //other styles
    }

calc（）のブラウザサポートをテストする

于 2013-03-02T09:53:12.660 に答える
1

いくつかの JavaScript コードを挿入する必要があります。

$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);

デモを見る

次に、メディア クエリを使用して、画面が小さくなったときにmiddledivの幅を変更します。

于 2013-03-02T09:19:39.163 に答える
0

1つの方法は、1行3セルのテーブルにdivを配置することです。テーブルの幅は100％になり、中央のtdの幅を設定できます。

しかし、誰かがCSSでより良い方法を提案すると確信しています。

于 2013-03-02T09:09:49.137 に答える