嵌套divs的一個問題

Question

我確信有一個簡單的解決方案，但我一直在打我的頭反對一兩個小時，並沒有取得太大的進展。 （基本上，我有一個包含二級包裝div（testwrap_inner），包含圖像縮略圖div（test1）和標題div（test2）的包裝div（testwrap_outer）。

我需要的字幕的div（TEST2）按比例高度根據其內容，次級包裝（testwrap_inner）來包含該div和下浮動到任何其他次級包裝的div，和主包裝（testwrap_outer）以包含所有其中。

我很抱歉做這麼差的工作解釋，所以我提供了一張圖片來說明我的意思是here。這是一個fiddle。

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim. In lacinia aliquam tempus. Nunc sollicitudin ac massa non porttitor. Maecenas quam urna, semper ut mauris id, lacinia consequat libero. Vivamus neque diam, vestibulum a est eget, aliquam tempus magna. Morbi sed tellus lobortis, condimentum mi id, finibus felis.</p> 

<div class=testwrap_outer> 
    <div class=testwrap_inner> 
     <!-- THUMBNAIL IMAGE --> 
     <div class=test1> 
      <img src="http://i.imgur.com/5KObDyq.jpg"> 
     </div> 
     <!-- THUMBNAIL CAPTION --> 
     <div class=test2><b>TEST2</b> 
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim.</div> 
    </div> 
    <div class=testwrap_inner> 
     <!-- THUMBNAIL IMAGE --> 
     <div class=test1> 
      <img src="http://i.imgur.com/5KObDyq.jpg"> 
     </div> 
     <!-- THUMBNAIL CAPTION --> 
     <div class=test2><b>TEST2</b> 
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim.</div> 
    </div> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim. In lacinia aliquam tempus. Nunc sollicitudin ac massa non porttitor. Maecenas quam urna, semper ut mauris id, lacinia consequat libero. Vivamus neque diam, vestibulum a est eget, aliquam tempus magna. Morbi sed tellus lobortis, condimentum mi id, finibus felis.</p> 

CSS

body { 
    background: #cccccc; 
    font-family: Arial, Helvetica, sans-serif; 
    min-width: 900px; 
} 
.testwrap_outer { 
    border: 1px solid red; 
    position: relative; 
} 
.testwrap_inner { 
    border: 1px solid blue; 
    float: left; 
    margin: 5px; 
    padding: 4px; 
    width: 296px; 
} 
.test1 { 
    border: 1px solid purple; 
    position: relative; 
    float: left; 
    opacity: 1.0; 
    width: 80px; 
    height: 80px; 
    overflow: hidden 
} 
.test1 img { 
    height: 100%; 
} 
.test1 img:hover { 
    opacity: 0.6; 
} 
.test2 { 
    border: 0px solid green; 
    position: relative; 
    float: left; 
    text-align: justify; 
    text-justify: inter-word; 
    padding: 6px; 
    width: 200px; 
} 

任何幫助深表感謝。

Answer 1

加入裏面testwrap_outer一個空的div與clear:both風格。這將清理佈局，並使外層div表現爲應該表現的容器。 更新小提琴： http://jsfiddle.net/a3hz8dss/1/

Answer 2

只包括在您testwrap_outer類overflow:hidden，也沒有必要在你的代碼position:relative！

CSS：

.testwrap_outer{ 
    border: 1px solid red; 
    overflow:hidden; 
} 

Fiddle Demo