3

所以我想要完成的是让一个 div 以页面 ( ) 为中心，并在其左侧margin: auto auto;有一个导航。div

导航的想法div可以打开或关闭（因此可能存在也可能不存在）。如果它存在与否，则不应干扰主 div 的居中。

下面是一个例子

样机图像

我尝试了几件事

  • 用主 div 包装两个 div。将主 div 设置为margin: auto auto，然后将两个子 div 设置为float: left. 问题是，当导航 div 消失时，整个东西都会向左移动。

  • 保持中间 divmargin: auto auto;向左浮动导航 div 然后使用margin-left，但是当页面变大或变小时，这会发生变化。

任何指针都会以最好的方式得到赞赏。我希望避免使用桌子。

JSFiddle 链接

4

2 回答 2

2

试试这个：

在您的 html 中：

<body>
<div class="encasing">
    <div class="leftmenu"></div>
</div>
</body>

在你的 CSS 中：

html, body
{
  width: 100%;
  height: 100%;
}

div.encasing
{
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 500px;
  background-color: green;
  position: relative;
}

div.leftmenu
{
  right: 100%;
  width: 10%;
  height: 300px;
  background-color: red;
  position: absolute;
}

重要的部分是：

  • 将包含菜单的块放在中心块内
  • 使中心块有 margin-left: auto; 边距右：自动；
  • 使中心块具有相对定位
  • 让菜单有绝对定位
  • 使菜单正确：100%

这里的想法是让左侧菜单使用中心块的位置，然后自行调整。右：100% 将菜单的右边缘放在菜单的左边缘。

最后，css 中一个非常好的技巧是绝对定位元素相对于最近的相对或绝对定位的父元素调整自己。:)

于 2012-08-03T15:00:27.437 回答
0

我能想到的几个解决方案：

  • 导航 div 使用绝对定位。您可能希望给 body 元素一个最小宽度，以避免在窗口太小时时导航 div 与主 div 重叠。
  • 三列布局，例如左右浮动的两个固定宽度的div，以及它们之间的内容div。在左浮动 div 内，显示您的导航 div（或不显示）。或者，尝试display: inline-block三列。不同之处在于如何处理小窗口（试试看）。同样，您可以通过在主体上设置最小宽度来消除不良影响。
  • 完全固定的布局。决定一个理想的屏幕分辨率，然后对所有内容进行硬编码。这样，您可以将所有内容绝对定位到您想要的位置，但缺点是它在任何偏离预期分辨率的东西上都不会很好看。尤其是移动设备将看到毁灭性的结果；您可以通过查询来应对这些@media问题，以将您的布局调整为其他屏幕分辨率。

您还应该尝试找到一个做您想做的事情的网站，并看看他们是如何做到的（检查 HTML、CSS，也许还有 Javascript）。

于 2012-08-03T11:36:35.753 回答