CSS中心与另一个div的左边的div

所以我试图完成的是有一个div集中在页面（margin: auto auto;）与导航div就在它的左边。CSS中心与另一个div的左边的div

想法是导航div可以打开或关闭（所以可能会或可能不会）。如果它存在或不存在，不应该干扰主分区的居中。

下面是一个例子

Mockup Image

我试过几件事情

与主DIV包装纸两个div的。将主div设置为margin: auto auto，然后将两个子div设置为float: left。问题是，当导航div消失的整个事情左移。
保持中间div margin: auto auto;将导航div左侧浮动，然后使用margin-left，但当页面变大或变小时会发生变化。

任何指针，将不胜感激最好的方式来做到这一点。我希望避免表格。

JSFiddle link

来源

2012-08-03 John Mitchell

你可以让一个jsFiddle？我想我知道解决方案，但我懒得创建整个脚本。 – arnoudhgz 2012-08-03 11:30:59

如果可能的话，我宁愿避免使用JS，我认为它只能在CSS中完成。 – 2012-08-03 11:31:33

你不需要'JS'，但是在jsFiddle.net上你可以只用'HTML'和'CSS'制作一个文档 – arnoudhgz 2012-08-03 11:32:44

试试这个：

在你的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; 
}

最重要的部分是：

为了把包含您的块菜单内部您的中心块
使中心块有余裕：auto; margin-right：auto;
使中心块有一个相对定位
有菜单有一个绝对定位
使菜单有权：100％

这里的想法是让左侧菜单中的位置然后调整自己。正确：100％会将菜单的右边缘放在菜单的左边缘。

最后，在CSS中一个非常好的技巧是绝对定位元素相对于最近的相对或绝对定位的父亲进行调整。 :)

来源

2012-08-03 15:00:27 ProtoWeapon

一些解决方案，我能想到的：在导航DIV

使用绝对定位。您可能希望为body元素设置最小宽度，以避免导航div在窗口太小时与主div重叠。
三列布局，例如两个固定宽度的div浮动到左侧和右侧，以及它们之间的内容div。在左浮动div内，显示您的导航div（或不）。或者，在三列上尝试display: inline-block。区别在于如何处理小窗口（试用）。再次，您可以通过在身体上设置最小宽度来抵消不希望的效果。
完全固定的布局。决定一个理想的屏幕分辨率，并硬编码一切。通过这种方式，您可以绝对定位您想要的任何位置，但缺点是它不会对任何偏离预期分辨率的任何事情看起来不错。特别是移动设备将看到毁灭性的结果;您可以使用@media查询来对付这些问题，以将您的布局调整为其他屏幕分辨率。

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

来源

2012-08-03 11:36:35 tdammers

CSS中心与另一个div的左边的div

回答

相关问题