- 主题:看w3c school教程，有个问题请教大家
当一个元素设置了浮动时，那么该元素就会脱离原文档流。。
因此你的例子，虽然div在逻辑上包含了img 和 p
但实际上或者视觉上，后面二者已经脱离了div（.news）
因此你需要将 .news 也设置为浮动才可以
【 在 marco2798 的大作中提到: 】
: 这几天看了一下3c的教程，对html，ccs，以及其中框的概念，div 布局，水平菜单有了一些了解，关于浮动 有个地方不太明白，请教一下大家。
: .news {
: background-color: gray;
: ...................
--
FROM 222.161.199.*
你这个例子用列表比较合适，对列表进行左浮动
确定宽度后自动换行
【 在 marco2798 的大作中提到: 】
: 对了，唐僧兄
: 比如有两图，并排放，各对应几句话，css样式如何实现呢？
: 我现在想法是p里面放4个span，两个文字两个图片，控制他们位置，然后文字加br分行。
: ...................
--
FROM 222.161.199.*
如果图是一个整体，可以考虑将图片作为背景
这样你只需控制文字格式即可
怎样处理合适，要看你实际情况来
【 在 marco2798 (一生一世一双人) 的大作中提到: 】
: 可是那个图是一个整体，就两张图，里面有几格。
: 每行文字对应的一格。
: 你的意思是列表4行，左边文字，图1，中间文字，图2，左浮动，然后文字自动换行？
--
FROM 222.161.199.*
光看图不好确认
你先设置一个通用格式：
*{margin: 0;padding: 0;}
这是为了消除浏览器的默认边距，也是为了解决不同浏览器的兼容性问题。
然后你可以通过设置背景色来“调试”一下，看看为何有空白。。
当然最好你能有chrome，通过右键的“审查该元素”来看，比较方便。。
【 在 marco2798 的大作中提到: 】
: 图片
: 为何“基于”左边会有空隙呢？
:
--
FROM 222.161.199.*
列表不是必然有空隙的。。
单看你这代码，看不出为啥没对齐。。
你把各个块用背景色渲染一下不就比较出来了？
【 在 marco2798 的大作中提到: 】
: firebug有同样的功能吗？
: 我是确定有空隙了，但是不知道什么原因造成的，或者说改不了。
: 一个列表是必然会有空隙吗？怎么才能让列表和前面段落内容对齐呢？我用了padding-left 但是没有效果：（
--
FROM 222.161.199.*