我有以下代码来呈现一组图像。图像按日期过滤,下方包含标题。图片作为网格放置在另一个旁边。代码
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内自动填充页面(如果可能)
答案 0 :(得分:2)
答案 1 :(得分:2)
答案 2 :(得分:1)
你可以添加div.date-group {display: inline-block;}
http://jsfiddle.net/jkPR7/11/
答案 3 :(得分:1)
这就是全部
.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/