CSS border-bottom＆amp;浮动

Question

我已经阅读了一些有关此问题的解决方案的其他问题，但我似乎无法在我的风格中修复它。

我的div标题图片有float: left;。 在同一个div内，我有article内容可以正确地“包裹”图像。 我的问题在article h2 border-bottom; h2内，但float的内容位于正确位置，边框'忽略'<div class="blog-item"> <div class="blog-item-image" style="background-image: url('');"> <span><img src="" alt="">07-08-2014</span> </div> <article> <h2>Titel</h2> <p>Paragraph here...</p> .blog-item { position: relative; width: 100%; padding: 55px 10%; background-color: #f6f6f6; min-height: 500px; overflow: hidden; } .blog-item .blog-item-image { background-position: center center; background-repeat: no-repeat; position: relative; width: 535px; height: 385px; margin-right: 55px; margin-bottom: 44px; float: left; } .blog-item article h2 { color: #009640; font-font: DINCond-BlackAlternate; font-weight: bold; border-bottom: 2px solid #c8c7c7; padding-bottom: 10px; width: 42%; } 1}}并悬停在图像上。

这是我的例子：

我的HTML和CSS：

{{1}}

由于

编辑： 小提琴：http://jsfiddle.net/xdwsLnuh/1/

Answer 1

在.blog-item article h2中添加边距并删除宽度

.blog-item article h2 {
      margin-left:590px; /* width of the '.blog-item-image' + 'right margin' */
}

Answer 2

这是因为浮动：左边的图像，你有两个选择：

1. 向文章添加浮动权限，但是你必须设置一个宽度，否则他将会因为博客项目的溢出而隐藏<隐藏
2. 或者你可以设置img和文章来显示：inline-block，在这种情况下从img中删除float