連接到中心對齊內容塊一側的菜單塊

Question

我需要將內容塊中心對齊，而菜單塊必須「連接」到內容塊的左側。所以這些塊之間的距離在瀏覽器窗口上升時應該保持不變。你能告訴我如何實施這個嗎？ :)

這裏想什麼我一些樣品圖片來實現：
Browser window is maximized
Browser window was made small
Browser window was made smaller, and scrollbar appeared

Answer 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; 
} 

附：

如果向body元素添加最小寬度爲540px（300px內容寬度+ 4 * 10px頁邊距+左右爲100px的菜單和空白空白頁），則調整大小時也不會裁剪佈局小。

Answer 2

我不能看到你的照片......但你的描述出現明顯不夠：

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 */ 
} 

Answer 3

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，CSS爲header_wrapper

#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; 
}