边框不会延伸过去的浮动元素？

我有以下代码来呈现一组图像。图像按日期过滤，并在下面包含标题。图片以网格的形式放在其他旁边。该代码边框不会延伸过去的浮动元素？

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中

来源

2014-02-18 Apostolos

这是因为这个 - > http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-不增加if-it/16568504＃16568504 ....这里是一个固定版本 - > http://jsfiddle.net/jkPR7/3/ –

你可以把'overflow：hidden;'放在'div.date组'。这将修复边界。 [DEMO]（http://jsfiddle.net/Ruddy/jkPR7/5/） – Ruddy

@粗糙糟糕的方法清理浮游物:) –

@Apostolos试试这个：

.float{ display: inline-block; }

Fiddle

来源

2014-02-18 08:37:17 Ismatjon

看起来你是一个救星。我为什么需要它。你能解释一下吗？ – Apostolos

默认情况下，div元素是块元素，这意味着它们将阻止整个水平空间，所以当你使它们显示时：inline-block比他们不会占据整个空间。所以这样，img-thumb元素将会彼此相邻。 – Ismatjon

当我在我的实际代码中使用它时，它似乎不起作用。 – Apostolos

你应该使用这个CSS

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

fiddle

来源

2014-02-18 08:11:39 eweb

谢谢你的回答，但现在当图像进入下一行时，它会在旁边显示大标题，而不是在它下面。 – Apostolos

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

来源

2014-02-18 08:13:35 user2167382

这里还有，Image将自身放置在图像的旁边，大标题和下面的改变行的下面，而不是完全在它下面。 – Apostolos

http://jsfiddle.net/jkPR7/22/如果我理解你.. – user2167382

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

这是所有

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

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

来源

2014-02-18 08:14:03 tom10271

同样，当图像进入下一行时，它会将自己放在旁边的大标题，而不是它下面 – Apostolos

尝试添加这对你的CSS：

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

编辑FIDLE：http://jsfiddle.net/jkPR7/27/

来源

2014-02-18 08:43:46

边框不会延伸过去的浮动元素？

回答

相关问题