logo标签列表

CSS居中：将div放置到另一个div的左侧

htmlcss
3
我想要实现的目标是在页面上居中一个
（margin: auto auto;），并在其左侧放置导航
。导航
可以随时开启或关闭（因此可能存在或不存在）。无论是否存在，都不应干扰主
的居中对齐。下面是一个示例：

Mockup Image

我尝试了几种方法：

  • 用一个主div包含两个子div，将主div设置为margin: auto auto，然后将两个子div都设置为float: left。问题在于当nav div消失时整体向左移动。

  • 保持中间的div margin: auto auto;，将nav div浮动到左侧，然后使用margin-left，但这会随着页面大小的改变而改变。

如果有任何指导意见可以提供，我希望避免使用表格。 JSFiddle链接
你能创建一个 jsFiddle 吗？我认为我知道解决方案，但是我太懒了，不想创建整个脚本。 - arnoudhgz
如果可能的话，我更愿意避免在其中使用JS，我认为这可以仅通过CSS完成。 - John Mitchell
你不需要 JS，但是在 jsFiddle.net 上你可以只用 HTML 和 CSS 来创建一个文档。 - arnoudhgz
你能在 JSFiddle 上复制代码，以便我们根据你的需求进行更新吗？ - Arpit Srivastava
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; margin-right: auto;
  • 使中心块具有相对定位
  • 使菜单具有绝对定位
  • 使菜单具有right: 100%
这里的想法是让左侧菜单使用中心块的位置，然后自己调整。Right: 100%将把菜单的右边缘放在菜单的左边缘。
最后，在css中一个非常好的技巧是绝对定位的元素相对于最近的相对或绝对定位的父元素进行调整。 :)
0
我能想到的几种解决方案：
  • 使用绝对定位来定位导航 div。你可能会想给 body 元素设置最小宽度，以避免在窗口太小时导航 div 与主 div 重叠。
  • 三列布局，例如左右两个固定宽度的 div 并排浮动，中间是内容 div。在左浮动的 div 中显示导航 div（或不显示）。另外，可以尝试在三列上设置display: inline-block。差异在于如何处理小窗口大小（尝试一下就知道了）。同样，你可以通过在 body 上设置最小宽度来抵消不良影响。
  • 完全固定布局。确定理想屏幕分辨率，并将所有内容硬编码到该分辨率上。这样，你可以将所有内容绝对定位到你想要的位置，但缺点是它在远离预期分辨率的情况下看起来并不好。特别是移动设备会看到毁灭性的结果；你可以通过 @media 查询来调整布局以适应其他屏幕分辨率。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接