如何实现以下布局？

Question

我试图获得以下布局，但遗漏了一些东西，所以我无法得到它。

.wrapper{display:inline-block;}
.image{float:left;}

Here is my fiddle !

标题和副标题的最佳风格建议是什么 我应该使用<span>标签吗？还是<h1>和<p>代码？

提前致谢！

Answer 1

以下是我根据具体情况构建的方法：

http://codepen.io/aaronlsilber/pen/LjuFb

你会注意到我保持CSS相当面向对象。你可能想看看像www.smacss.com这样的东西 - 它会改变你写css的方式！

另外，这让我想起了媒体对象：

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Answer 2

Updated Fiddle - with spacing around the three components
Second Fiddle - without spacing around components

修改/更新

我将标题设置为<h1>标记，将子标题设置为<p>标记。这种设置使两个实体不在同一条线上。

我还添加了一些边距（每个组件周围的间距），边框和背景颜色更像你想要的样式。

因为您希望内容/子标题在图片底部被截断，并且您的图片不会始终是设定的分辨率，所以我添加了一个javascript方法来迭代通过您的DOM，特别是在.wrapper div上，并动态设置子标题/内容的高度。我通过计算图像的高度.offsetHeight并从标题和间距总是占用的高度中减去它来做到这一点。

var wrappers = document.getElementsByClassName("wrapper");
for(var i = 0; i < wrappers.length; i++){
    var wrapper = wrappers[i];
    var height = wrapper.getElementsByClassName("image")[0].offsetHeight;
    wrapper.getElementsByClassName("sub")[0].setAttribute("style","height:"+(height - 55) + "px");
}

在您的子标题/内容中，我设置了一个高度和overflow-y:hidden，如果它超出您图片的底部，这将切断您的子标题/内容。

请在我的答案顶部看到更新的小提琴。