CSS - 如何讓父div響應？

我有一個父div內的子div爲了使子div響應。我想讓母公司也很敏感，但經過幾天的搜索，我還沒有找到任何解決方案。CSS - 如何讓父div響應？

我的代碼：

CSS

.parent { 
    width: 100%; 
    height: auto; 
    margin: 0 auto 0 auto; 
    background-color: #b5b5b5; 
    overflow: hidden; 
    position: relative; 
} 
.css-slideshow { 
    position: relative; 
    max-width: 1050px; 
    height: 345px; 
    margin: 3.5em auto auto auto; 
    z-index: 1; 
} 
.css-slideshow div { 
    margin: 0; 
    position: absolute; 
    max-width:100% !important; 
    height:auto; 
} 
.css-slideshow img { 
    box-shadow: 0 0 2px #666; 
    max-width:100% !important; 
    height:auto; 
}

HTML

<div class="parent"> 
    <div class="css-slideshow"> 
     <div> 
      <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" /> 
     </div> 
    </div> 
</div>

這裏有一個jsfiddle。

灰色部分是我想要響應的父級div，因此當分辨率降低時，它的底部與子div（css-slideshow）的底部對齊。我不確定它是否有所作爲，但我希望父div的高度能夠響應，而不是它的寬度，爲了使它在整個頁面上伸展，設置爲100％。

注意：圖像上方的空間（子div：css-slideshow）是有意的;它爲導航欄騰出空間。 css-slideshow中的z-index將它保留在響應下拉菜單後面。

感謝您的閱讀！

來源

2015-05-28 Raul

如果你擺脫位置：絕對的孩子和父母的高度它似乎工作。你是否有理由將其定位於絕對位置？ http://jsfiddle.net/nupebzh4/4/

當你讓孩子的位置：絕對，它把它從流動的流量。這使得父母不知道內容有多高，這就是爲什麼你必須硬編碼一個高度。如果您將孩子放回流中，則父容器可以自動調整大小以包含內容，因爲它會更改大小，因爲您不需要對高度進行硬編碼。

.parent { 
    width: 100%; 
    height: auto; 
    margin: 0 auto 0 auto; 
    background-color: #b5b5b5; 
    overflow: hidden; 
    position: relative; 
} 
.css-slideshow { 
    position: relative; 
    max-width: 1050px; 
    margin: 3.5em auto auto auto; 
    z-index: 1; 
} 
.css-slideshow div { 
    margin: 0; 
    max-width:100% !important; 
    /* responsive */ 
    height:auto; 
} 
.css-slideshow img { 
    box-shadow: 0 0 2px #666; 
    max-width:100% !important; 
    /* responsive */ 
    height:auto; 
}

來源

2015-05-28 04:00:01

謝謝Kevin，不僅僅是爲了解決方案，而是解決方案的一個很好的解釋。說實話，我不記得爲什麼我做父母的div絕對。自從我查看這段代碼以來已經有一段時間了。我想我原本是在另一個分區內，沒有這個位置：它絕對隱藏在它後面。我一直在使用CSS一段時間，但我學到的一切都是通過互聯網搜索和試驗和錯誤。我認爲是時候瞭解更多關於CSS如何實際運行的知識，而不僅僅是搜索我需要的代碼。 – Raul

我改了一下你的CSS：

刪除溢出：隱藏
評論的高度的CSS-幻燈片
刪除高度：汽車

http://jsfiddle.net/nupebzh4/5/

.parent { 
     width: 100%; 
     margin: 0 auto 0 auto; 
     background-color: #b5b5b5; 
     position: relative; 
     display:inline-block; 
    } 

.css-slideshow { 
    position: relative; 
    max-width: 1050px; 
    /*height: 345px;*/ 
    margin: 3.5em auto auto auto; 
    z-index: 1; 
} 

.css-slideshow div { 
    margin: 0; 
    position: absolute; 
    width:100%; 
} 

.css-slideshow img { 
    box-shadow: 0 0 2px #666; 
    width:100%; 
}

來源

2015-05-28 04:07:27 Yoann

CSS - 如何讓父div響應？

回答

相關問題