使用CSS來定位div

我知道有這麼多的問題，這已經在stackoverflow和其他地方在網絡上。但是沒有人幫助過我。使用CSS來定位div

目前，

我有這個標記：

<div class="wrapper"> 
    <div class="navigation"> 
    </div> 
    <div class="innerWrapper"> 
    </div> 
</div>

導航是垂直左側列表
innerWrapper是內容區域。它需要重疊導航區域的邊距爲-10px。
包裝需要根據innerWrapper的高度和寬度來包裝div和展開。

CSS：

.wrapper { 
    position: relative; 
    min-width: 40em; 
    margin: 0; 
    overflow: hidden; 
    padding: 10px 100px; 
    border: red solid 1px; 
    margin-bottom: 20px; 
} 

.navigation, .innerWrapper { 
    margin: 0; 
    overflow: hidden; 
    min-height: 40em; 
    position: absolute; 
    float: left; 
} 

.navigation { 
    width: 140px; 
    margin-left: 0; 
    border: red solid 1px; 
} 

.innerWrapper { 
    left: 16.2em; 
    border-radius: 2.00em; 
    -webkit-border-radius: 2.00em; 
    -moz-border-radius: 2.00em; 
    border-radius: 1.00em; 
    background-color: white; 
    border-top: 2px inset rgba(0, 0, 0, 0.2); 
    border-bottom: 2px outset rgba(255, 255, 255, 0.2); 
    min-width: 900px; 
    margin-top: 0; 
    padding: 15px; 
    clear: both; 
}

fiddle

問題：

包裝物不包裹2周的div而寬度默認爲100％，高度吞嚥兩者的div

如何解決這個問題，所以包裝div仍然包裝兩個div;導航和內包裝仍然並排，內包裝重疊導航，當窗口最小化時，所有的div都保持原位？

感謝您的幫助！

最終修正：

http://jsfiddle.net/jje41mm2/7/

由於用戶和吉列爾莫。

來源

2014-10-16 capiono

創建一個小提琴 – 2014-10-16 14:44:13

刪除'位置：絕對'？ – 2014-10-16 15:10:50

試試這個：

http://plnkr.co/edit/7bGMvzJnLRDWoTnYDUc2?p=preview

你應該仍然修改一些代碼，但它應該符合你的想法。

.wrapper { 
    position: relative; 
    min-width: 40em; 
    margin: 0; 
    padding: 0; 
    border: orange solid 1px; 
    margin-bottom: 20px; 
} 

.navigation, .innerWrapper { 
    margin: 0; 
    float: left; 
    position: relative; 
} 

.navigation { 
    width: 10%; 
    margin-left: 0; 
    border: red solid 1px; 
    height: 400px; 
} 

.innerWrapper { 
    border-radius: 2.00em; 
    -webkit-border-radius: 2.00em; 
    -moz-border-radius: 2.00em; 
    border-radius: 1.00em; 
    background-color: white; 
    border-top: 2px inset rgba(0, 0, 0, 0.2); 
    border-bottom: 2px outset rgba(255, 255, 255, 0.2); 
    margin-top: 0; 
    padding: 15px; 
    width: 80%; 
    margin-left: -10px; 
} 

.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

來源

2014-10-16 15:14:14 Guillermo

-1

I'm看到兩件事情：你的CSS至少包含一個錯誤引用.innerWrapper時，you're調用它。內容，包裝

您清除了浮動？這是一個常見的問題是you're經歷之一，這篇文章可以幫助你解決這個問題：http://css-tricks.com/all-about-floats/

問候，

吉列爾莫

來源

2014-10-16 14:48:46 Guillermo

Paulie_D如果他/她沒有清理漂浮物，那麼這是問題的可能原因。那爲什麼它是一個答案，而不是一個評論。 – Guillermo 2014-10-16 15:06:42

正如我收到了你的要求

我創建了一個的jsfiddle演示在這裏：[http://jsfiddle.net/jje41mm2/5/][1]
如果烏拉圭回合的網站響應然後更改寬度百分比，而不是像素&讓我知道如果
ü希望任何變化在這個，我會很樂意幫助

http://jsfiddle.net/jje41mm2/5/

來源

2014-10-16 16:18:49

使用CSS來定位div

回答

相關問題