2011-03-31 132 views
0

我要实现的是这样的:如何用CSS实现这种布局?

Look at my awesome 'mockuping' skills

  • A)是一个正方形的图像,比如65x65。
  • B),该图标是另一个图像,其 需要内部A.
  • C)到被浮置的行的最小长度是 A的高度最大值取决于文本 描述的长度的 。

通常当我已经浮如A和B的图像,我愿意把我的容器positionrelative,并obsolute为浮动图像,这将做到这一点,但我有点这里的文字丢失。

这只是要在webkit浏览器上使用,如果这有什么用处的话。

+0

它出了什么问题?你有一个例子吗? – theazureshadow 2011-03-31 02:29:47

+0

就在webkit上......确实有帮助!但是如果你把目前为止的代码都放到html和css中,它会有更大的帮助。 – 2011-03-31 02:51:37

回答

3

如果图像大小是固定的,将来不太可能改变,那么我建议将绝对位置应用于图像(你在说什么)。我猜你的问题是,如果文字太短,图像的高度会超过容器的高度。这是最小高度轻易可以解决的:

.module { 
    min-height: 65px; /*your image height*/ 
} 

您可以查看这里演示: http://jsfiddle.net/RkeJJ/

这应该工作一路下跌到IE7。

如果你的图像大小是可变的,那么我建议显示:table/table-row/table-cell,但这只适用于IE8 +和其他现代浏览器。

我是debcaña!;)

+0

是的,这是做到了。谢谢Mark :)(可怕的小世界!) – pablasso 2011-03-31 03:03:01

1

你知道图像A的宽度(大图像)。例如标题为h1,文本为p(或div),因此将这两个元素设置为的左边距大于图像A的宽度

然后,您可以将图像A浮动到左侧,并使用绝对定位将图标B定位在图像上方。

最后,我将有一个包装divoverflow: auto有一个边框(如果需要),并允许底部边距提供以下元素之间的空白区域。

部分答案:看到我的代码段,http://jsfiddle.net/audetwebdesign/Nam52/

你只需要在标题后添加日期元素。