CSS制作Facebook的媒体对象
前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：
我们把上图拆分细化一下，可以划成下图的样子：
根据上图我们就可以轻松的写出需要的HTML结构。
HTML Markup:
<div class="stbody"> <div class="stimg">img part</div> <div class="sttext">text part</div> </div>
有了结构，我们就可以来分析样式的写法
CSS Code
.stbody {
min-height: 70px;
margin-bottom: 10px;
border-bottom: 1px dashed #c00;
}
.stimg {
float: left;
height: 50px;
width: 50px;
border: 1px solid #dedede;
padding: 5px;
}
.sttext {
overflow: hidden;
min-width: 50px;
word-wrap: break-word;
padding: 5px;
}
注：如果你的图片是带有链接的，那么可以将div换成a标签。
上面代码呈现的效果如下所示：
当然“div.sttext”里面的元素可以根据自己的要求来写。还有一种情况，我们有时图片在右边怎么办？其实答案不用我说，大家都知道。我这里介绍的方法就是在“div.stimg”标签中加上一个类名“stimgR”，然后并在其身上运用样式：
.stimg.stimgR {
float: right;
}
那么此时效果就出来了：
此处有一个关键之处，如何让“sttext”中的内容不围绕在图片的周围，有关于解决这种现象有几种方法：
1、方法一：
.sttext {
oveflow: hidden;
zoom:1
}
2、方法二
.sttext {
display: table;
zoom:1
}
3、方法三
.sttext {
display: table-cell;
zoom:1
}
有关于这个的详细介绍大家可以参考《如何解决浮动元素周围环绕文字》一文。
为了让你的样式更具完美，在“.sttext”中还要让文本能自动换行：
.sttext {
word-wrap: break-word;
}
有关于文本换行的详细介绍大家不仿参考《CSS3 Word-wrap》一文的介绍。
那么这样一个完美的媒体块的制作就算是完美了。
上面只是一种制作方法，接下来我们在来看另外一种：
HTML Markup
<div class="sttbody"> <a href="aboutme.html" class="sttimg"> <img src="myimage.png" alt="img" /> </a> <div class="sttext"> Something about me </div> </div>
CSS Code
.sttbody {margin: 10px;}
.sttext {display: table-cell;zoom:1;}
.sttext > :first-child{margin-top:0;}/*你也可以在这个标签中加上一个类名.nmT {margin-top:0;}*/
.sttext > :last-child{margin-bottom:0;}/*在这个标签上加上一个类名.nmB {margin-bottom:0}*/
.sttimg {float:left;margin-right:10px;}/*这两个属性完全可以用类名来代替：.fl{float:left} .mrm {margin-right: 10px}*/
.sttimg img {display: block;}
.sttimgR {float:right;margin-left: 10px;}/*这两个属性完全可以用类名来代替：.fr{float:right} .mlm {margin-left: 10px}*/
上面这种方法采用的是模块化思路，当你一个项目多处出现这样的样式风格，我们都可以采用这个模板来制作。前面在《OOCSS——核心篇》一文中专门介绍了这一个东东。
上面是单一的，如果你有多个这样的循环效果，上面的效果也可以帮您完成，不过我更建议使用列表的形式来制作。
HTML Markup
<ul> <li class="stbody> <div class="stimg"></div> <div class="sttext"></div> </li> [...] <li class="stbody"> <div class="stimg"></div> <div class="sttext"></div> </li> </ul>
我们只需改变结构，无需换样式就能做出效果：
这些效果做起来都并不难，但有时我们会碰到里面嵌套一层类似效果：
正如上图展示的一样，那么肯定有人在想，要重新来过一个结构，在来过一套样式。如果你是这么想的话，那您就错了，为什么呢？不多说，直接看下文。
首先我在前面的HTML结构上做一下修改：
<ul> <li class="stbody> <div class="stimg"></div> <div class="sttext"> <!-- 父元素内容 --> <div class="stbody img_attachment"> <div class="stimg">img part</div> <div class="sttext">text part</div> </div> </div> </li> [...] <li class="stbody"> <div class="stimg"></div> <div class="sttext"> <!-- 父元素内容 --> <div class="stbody img_attachment"> <div class="stimg">img part</div> <div class="sttext">text part</div> </div> </div> </li> </ul>
我们只是在原先的“div.sttext”内容下面在放了一个这样的结构，并给里面的“stbody”加了一个类名“img_attachment”，我们只稍为加一点点样式就OK了：
.img_attachment {
margin-top:14px;
}
.img_attachment.stbody {
border-bottom: none;
margin-bottom:0;
}
看看我自己做的效果吧：
那么今天啰嗦扯了一堆，不知道您是否看明白了。虽然此文介绍的制作几种方法都不难，可以说很常见，但能运用得好的我想还是需要一点技巧的，特别的是重用，套用。正如上面介绍的一样。不过今天我最想给大家传达的是一个思路“在平时制作中，把相同的一块提出来，拆分成一个独立的模块。在拆分模块时应保证数量尽可能的少的原则下，做到尽可能的简单，以提高他的重用性。”
那么今天就扯到这了，希望大家喜欢这篇文章的内容，如果您有更好的思路，请在下面的评论中与大家一起分享。
如需转载烦请注明出处：W3CPLUS