Question

我确信这有一个简单的解决方案，但是我已经打了一个小时或两个小时并没有取得多大进展。

基本上，我有一个包装器div（testwrap_outer），它包含一个辅助包装器div（testwrap_inner），它将图像缩略图div（test1）和一个标题div（test2）保存在一起。

我需要标题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

只需在您的班级overflow:hidden中添加testwrap_outer，您的代码中也不需要position:relative！

<强> CSS：

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

Fiddle Demo

嵌套div的问题

2 个答案: