0

http://jsfiddle.net/aLmUy/1/

^^^^ここを見て私が何を意味するのか見てください^^^

わかりました、これを説明するのは少し難しいです...

基本的に私が欲しいのは、水平方向（垂直方向ではなく）に固定レイアウトを設定して、ページを拡大し、ラッパーを拡張して、ユーザーのブラウザーに合わせてサイズを変更することです。私が設定したい唯一のサイズは、ラッパーが遠く離れている間隔です。ブラウザの端をクリックしてサイズを変更した場合は、ブラウザでページのサイズを変更したいと思います。

これを行う方法は、たとえば、私のレイアウトが左側のコンテンツと右側のナビゲーションメニューで構成されているとしましょう。

コンテンツの幅を70％にし、メニューの幅を30％にしますか？しかし、私のマージンが分離のためのスペースを占めているので、それはうまくいきません。では、このレイアウト構造を作成するにはどうすればよいですか？それはほとんどすべてのサイトが使用しているものであり、私はそれがどのように行われているのか理解できません。

CSS：

#wrapper {
position: relative;
float: left;
/* width: 70%; <--- THIS DOES NOT WORK WITH MARGINS /*
background: #ccc;
padding: 30px;
margin: 0 0 30px 20px;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

#wrapper_right {
position: relative;
float: right;
/* width: 30%; <--- THIS DOES NOT WORK WITH MARGINS /*
background: #ccc;
padding: 30px;
margin: 0 20px 30px 0;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

.fade {
opacity: 0.7;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
opacity: 1;
}




HTML：

    <!-- #mainwrap -->
    <div id="wrapper" class="fade">

        BLAH BLAH BLAH BLAH BLAH BLAH <br />
        BLAH BLAH BLAH BLAH BLAH BLAH <br />

    </div>
    <!-- /#mainpagewrap -->


    <!-- #wrapper_right -->
    <div id="wrapper_right" class="fade">
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    </div>
    <!-- /#wrapper_right -->

誰かが、左側にラッパー、中央にコンテンツ、右側に25％、50％、25％のサイズの余白のあるシンプルなレイアウトを作成できますか？また、ブラウザーの解像度に応じてサイズを変更できますか？

だから私はそれがどのように行われるかを見ることができました。また、助けてくれる人に事前に感謝します（：

4

2 に答える 2

0

私はあなたがやりたいことを達成しましたが、いくつか変更しなければなりませんでした。

  1. div2つのdivをラップする親を追加しました。
  2. 余白を削除し、親にパディングを追加しました。
  3. inline-blockeddivsとdiv左から右に移動しました

http://jsfiddle.net/aLmUy/2/

于 2013-03-13T16:02:29.423 に答える
0

@ashleyありがとうございます。これは、次のようなものを使用するよりもはるかに優れています。

#wrapper {
position: relative;
float: left;
width: 55%;
background: #fff;
padding: 3%;
margin: 0 0 5% 2%;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

#wrapper_right {
position: relative;
float: right;
width: 28%;
background: #fff;
padding: 3%;
margin: 0 2% 5% 0;
border-radius: 4px 4px 4px 4px;
text-align: center;
}
于 2013-03-13T16:12:14.910 に答える