嵌套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