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

回答

相關問題