html - 附加到居中对齐内容块一侧的菜单块

Question

我需要内容块居中对齐，而菜单块必须“附加”到内容块的左侧。因此，这些块之间的距离应该在浏览器窗口增大时保持不变。你能告诉我如何实现这个吗？:)

这里有一些我想实现的示例图片：
浏览器窗口最大化
浏览器窗口变小
浏览器窗口变小，出现滚动条

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 元素添加 540 像素的最小宽度（300 像素内容宽度 + 4 * 10 像素边距 + 左右 100 像素间距用于菜单和空白空间），则在调整太小时不会剪裁布局。

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