边界不会延伸过浮动元素?

时间:2014-02-18 08:02:06

标签: html css django

我有以下代码来呈现一组图像。图像按日期过滤,下方包含标题。图片作为网格放置在另一个旁边。代码

HTML

<!doctype html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <title>Images</title>
</head>
<body>
    <div class="date-group">
        <div class='date-title'>
             13/02/2014
        </div>
        <div class="date-content">
            <div class="img-thumb float">
                <a href="../images/bold.jpg">
                    <img src="../images/bold.jpg">
                    <span class="caption">A big caption that might be going in more than one lines</span>                

                </a>
            </div>
            <div class="img-thumb float">
                <a href="../images/bold.jpg"><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
            <div class="img-thumb float">
                <a href="../images/bold.jpg"><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
            <div class="img-thumb float">
                <a><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
            <div class="img-thumb float">
                <a><img src="../images/bold.jpg"></a>
                <span class="caption">A caption</span>                
            </div>
        </div>
    </div>
</body>
</html>

CSS

div.date-group {
    text-align: center;
    border: 1px solid black;
}

.date-group img{
    width:100px;
    height:100px;
}

.img-thumb{
    width:100px;
    text-align: center;
}
.date-group span{
    display: block;
}

.float{
    float: left;
}

.date-title{
    height:20px;
    border-bottom:1px solid black;
    margin-bottom: 10px;
}
.date-content{
    margin-right: 10px;
    min-height: 150px;

}

这是fiddle。我的问题是当边界包裹到多行时,边框不会随着标题的增长而增长。如果第一行已满,此代码也不会使图像转到第二行和第三行。如何更改这两件事(边框增长和.img-thumb浮动以在没有足够空间时更改行。还要记住,这些图像将在django模板中的for内自动填充页面(如果可能)

5 个答案:

答案 0 :(得分:2)

你应该使用这个css

.date-content {
    margin-right: 10px;
    min-height: 150px;
    overflow: auto;
}

fiddle

答案 1 :(得分:2)

@Apostolos试试这个:

.float{ display: inline-block; }

Fiddle

答案 2 :(得分:1)

你可以添加div.date-group {display: inline-block;} http://jsfiddle.net/jkPR7/11/

答案 3 :(得分:1)

http://jsfiddle.net/jkPR7/12/

这就是全部

.date-group span{
    display: table-cell;
}

.date-content{
    margin-right: 10px;
    min-height: 150px;
    display: table;
}

答案 4 :(得分:1)

尝试将此添加到您的CSS:

.date-content:after {
    content: "";
    clear: both;
    display: block;
}

编辑fidle:http://jsfiddle.net/jkPR7/27/

了解详情http://css-tricks.com/all-about-floats/