2

コンテンツ ブロックを中央揃えにする必要がありますが、メニュー ブロックはコンテンツ ブロックの左側に「取り付ける」必要があります。そのため、これらのブロック間の距離は、ブラウザー ウィンドウのサイズ変更中も一定に保たれる必要があります。これを実装する方法を教えてください。:)

ここに私が実装したいもののいくつかのサンプル写真があります:
ブラウザ ウィンドウが最大化
されました
ブラウザ ウィンドウが小さくなりました

4

3 に答える 3

1

おっと、「上昇中の定数」ビットを見逃しました。問題を解決するために例を更新しました。

これはあなたが探しているものですか？

http://jsfiddle.net/r8YQc/1/

HTML:

<div id="header"></div>
<div id="content">
    <div id="menu"></div>
</div>
<div id="footer"></div>
​

CSS:

html,
body{
    margin:0;
    padding:0;
}

#header{
    margin:10px;
    background-color:orange;
    height:50px;
}

#content{
    position:relative; /*Create new offset context*/
    display:block;
    width:300px; /*Define width*/
    margin: 0 auto; /*center horizontally in available space*/
    height:400px;
    background-color:green;
}

#menu{
    background-color:lightgreen;
    position:absolute; /*Use left/right/top/bottom in relation to #content's offset context*/
    right:310px; /*move the right edge of the element 310px left*/
    width:100px;
    height:200px;
}

#footer{
    background-color: blue;
    margin: 10px;
    height: 50px;
}

PS

body 要素に 540px の最小幅 (300px のコンテンツ幅 + 4 * 10px の余白 + 左右に 100px のガター (メニューと空のスペース)) を body 要素に追加すると、サイズが小さすぎるとレイアウトがクリップされません。

于 2012-08-28T02:48:18.443 に答える
0

私はあなたの写真を見ることができません...しかしあなたの説明は十分に明白に見えます：

HTML

<div id="contentBlock">
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

CSS

#contentBlock {
    width: 500px;
    display: block;
    margin: 0 auto;
}

#contentBlock ul {
    /* You really don't need anything in here because it should be left aligned in the first place */
}

ただし、メニュー内のテキストやその他の要素contentBlockをラップアラウンドしたい場合は、次のCSSの解決策をお勧めします。

#contentBlock {
    width: 500px;
    display: block;
    margin: 0 auto;
    overflow: hidden; /* This is important, it clears a heights on the contentBlock and allows the creation of floated children to be taken out of the DOM */
}

#contentBlock ul {
    float: left;
    /* Again... the menu's text should by default be left-aligned here */
}
于 2012-08-28T02:44:22.087 に答える
0

1 ウェブサイトを中央のレイアウトにする ...これにより、ウェブサイトが縦長のデザインのように見えないため、すべての解像度で適切に表示されます。

あなたがする必要がある写真のレイアウトを作るために

1、html

<div id="header_wrapper">
    <div id="header"></div>
</div>
 <div id="wrapper">
  <div id="menu"></div>
  <div id="content">

  </div>
</div>
<div id="footer"></div>
​

2、header_wrapperのcss

 #header_wrapper{
   width:100%; //so you can set the background to the header 
 }

3、ヘッダー用のcss

 #header{
   max-width:1200px; 
   min-width:1000px;
 }

4、メニューとコンテンツを持つラッパーを作成します

コンテンツのcss

 #wrapper{
  margin:0 auto; //make it on the center of the page
  width:1000px;
  display:block;
  }

5 ラッパーにメニューとコンテンツを追加します

メニューのcss

#menu{
 width:100px;
 height:200px;
 float:left;
}

6、そしてコンテンツについて

#content{
    width:300px; /*Define width*/
    float:left;
 }
于 2012-08-28T03:08:51.410 に答える