Question

我正在寻找以下方法：

--------------------------|--------------------------
|                                                   |
|    --------  -------------------------            |
|    | menu |  |                       |            |
|    |      |  |                       |            |
|    --------  |       #content        |            |
|              |                       |            |
|              |                       |            |
|              |                       |            |
|              -------------------------            |
|                                                   |
|                                                   |
--------------------------|--------------------------

div #content水平居中，固定宽度。 div #menu贴在#content的左侧。

目前我在div #wrap内有两个div，其宽度为#content和margin:auto。我将#menu置于绝对位置并将其设为负值margin-left。但是这样，如果浏览器窗口变得更小#menu，则不会强制使用水平滚动条（出于可用性原因，它应该是这样）。

感谢您提供更好的解决方案！

Answer 1

简单使用这样的东西

<div class="wrapper">

  <div id="content">
    <!-- content -->
    <div id="menu">
    <!-- menu content -->
    </div>
  </div>

</div>

“wrapper”将强制布局的宽度。其他一切都是一样的，除了我更喜欢左：-200px例如insins of margin-left：-200px;对于“菜单”...

当然“菜单”必须绝对是“内容”等。“内容”是位置：相对。

Answer 2

这有用吗？在css表中

#menu {overflow:scroll};

Answer 3

如果所有宽度都已修复，请尝试：http://jsfiddle.net/hvrzx/

它需要一个额外的div，但删除所有定位。使用以下公式计算margin-left的{{1}}：#innerwrap，其中(o+c)/2-i是o的宽度，#outerwrap是{c的宽度1}}和#content是i的宽度。

#innerwrap宽度的变化会影响#innerwrap和#menu之间的差距。

如何水平居中主div，左侧仍有div

3 个答案: