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

P.S。

如果你将最小宽度540px（300px内容宽度+ 4 * 10px边距+ 100px gutter左右为菜单和空白空间）添加到body元素，当调整大小太小时它不会剪裁布局。

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，用于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 for menu

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

6，现在为内容

#content{
    width:300px; /*Define width*/
    float:left;
 }

菜单块附加到中心对齐的内容块的一侧

3 个答案: