css – 如何缩短blockquote以包裹浮动的div?

我对css问题很难过.我在这里张贴了一个测试页面http://georgecrawford.com/test/供您检查.

我有一个左浮动的侧边栏div,以及一个跟随它的主内容div(它应该环绕它).如果内容只是段落,则没有问题,因为文本在浮点周围很好地包装.但是,我在内容中有一些块引用,我希望它们具有背景颜色和/或边框.这些文本没有问题,它当然围绕侧边栏很好地包装.但是,blockquote本身跨越内容div的整个宽度,这意味着它周围的边框将在侧边栏的顶部运行.

如何确保内容div中的blockquotes水平缩短为与其中的文本行(“行框”)相同的宽度?段落具有相同的行为,但我的段落周围不需要边框!

谢谢你的帮助!

解决方法

我偶然发现了这个问题的潜在修复方法.

如果我使用CSS属性overflow:auto设置所有blockquotes,它会使它们在浮动侧边栏重叠时减小到所需的宽度.我已经在http://georgecrawford.com/test/更新了演示,因此您可以看到差异.它在Safari / OS X中非常完美,但我还没有在其他浏览器中测试过.

任何意见?这个解决方案有什么缺点吗?非常感谢你的帮助.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效