4

我对 CSS 不是很精通……而且还不知道所有主要的怪癖。也许有人可以帮助我。我已经设置了一个显示我的代码的图像、我的 DIV 图表以及它在 IE 与 Chrome/FF 中的外观示例

图表

有人可以指导我采取正确的方法吗？

小提琴：http: //jsfiddle.net/PhilippeVay/BuuuW/2/

它在 IE 中运行良好，但在 Chrome 和 FF 中，其中一个图像正在转义其容器，并且我称之为“内容块”的“内容块”位于它应该在旁边的图像下方。尽管我的图表说没有 css，但每个组件都有一个 css 类。目前这些组件只有一些基本样式（填充、文本缩进等）。

谢谢

4

2 回答 2

1

使用clearfix hack .cbContent（包括 clearfix css 和 add class .clearfix）使框展开以适合左侧的图像。

编辑：另外，请确保您没有给相同的 div 一个固定的宽度（即 500 像素）和填充。这可能会使不同的浏览器由于它们解释盒子模型的方式而表现不同。有关这方面的更多信息以及很好的解决方案，请在此处阅读 Paul Irish 的博客文章：http: //paulirish.com/2012/box-sizing-border-box-ftw/

于 2012-08-28T21:34:41.393 回答
1

添加overflow: hidden到容器将避免左侧部分继续在右侧图像下方：

.cb {
    overflow: hidden;
}

这将创建一个新的块格式化上下文，我不会向你解释，因为其他人比我做得更好:) http://colinaarts.com/articles/the-magic-of-overflow-hidden/

编辑：没有看到 person.jpg 不在左侧的父级：请参阅 clearfix 方法的其他答案 :)

于 2012-08-28T21:36:18.757 回答