浮動DIV是逸出父DIV

予設定的寬度&高度到父圖像的div。它裏面有兩個子div，分別叫做image_one和image_two。問題是，當我減少視口的寬度時，image_two div會轉義父div並進入image_one div。我如何防止這個div逃脫？我認爲設置一個百分比寬度會自動調整div的大小，使其保留在父div的內部。當我設置一個溢出：隱藏時，兩個div都消失了。浮動DIV是逸出父DIV

下面是對代碼的鏈接：

http://codepen.io/matosmtz/pen/ZGpNmy

<div class="images"> 
    <div class="image_one"> 
     <p style="background-color:red; text-align:center">Photo</p> 
    </div> 
    <div class="image_two"> 
     <p style="background-color:red; text-align:center">Photo</p> 
    </div>  
</div> 


.images { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 220px; 
} 

.image_one { 
    width: 30%; 
    height: 200px; 
    position: relative; 
    background-color: black; 
    padding: 5px; 
    float: left; 
    margin: 5px; 
} 

.image_two { 
    width: 30%; 
    height: 200px; 
    position: relative; 
    background-color: black; 
    padding: 5px; 
    float: left; 
    margin: 5px; 
}

來源

2015-05-23 Marcos Martinez

我覺得你的父母也應該有一個位置：相對或立場：絕對的; –

添加溢出隱患清除花車，和側邊欄下方的'.images' DIV幻燈片，因爲側邊欄是200像素寬，'.images'寬100％，所以有兩個div的沒有足夠的空間。 –

我無法設置絕對位置，因爲我希望父級相對於side_nav和頭。我嘗試設置一個位置：相對，但子div仍然逃避父div。 –

的.images DIV是100％的寬度。這包括您的codepen上的側邊欄。

孩子的div是30％，但是這意味着整個空間的30％。所以當你減小瀏覽器的大小時，最終它們足夠大，需要相互滑動，因爲你的.sidebar的固定寬度爲200px。

我建議有一個看Bootstrap CSS作品爲了如何找到你的修爲這個，或者直出使用。

來源

2015-05-23 19:39:55

嗨，是@SlavenkoMijic在幾分鐘前提到了這一點。我將研究Bootstrap的工作原理。我沒有使用Bootstrap的原因之一是因爲我希望能夠編寫我的整個投資組合網站。我覺得這會讓我更多地瞭解編碼。你有沒有其他的建議可以幫助我學習如何編寫一個網站？ –

我認爲這裏的問題的主要原因可能是通過了解媒體查詢的幫助。 Bootstrap網格工作得很好，部分原因是它們使用媒體查詢來說「當瀏覽器窗口超過x像素寬，這個元素寬度爲y像素」等等。他們採取像形式'@media（最小寬度：992px）{[關於元素的嵌入規則這裏]}'含義：一旦瀏覽器是超過992px的最小寬度，執行以下操作。他們對創建一個不錯的響應網站非常有用。 –

浮動DIV是逸出父DIV

回答

相關問題