水木社区手机版
- 主题:看w3c school教程，有个问题请教大家
- 这几天看了一下3c的教程，对html，ccs，以及其中框的概念，div 布局，水平菜单有了一些了解，关于浮动 有个地方不太明白，请教一下大家。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
为何这里div的框没有包含浮动图片和文字呢？而需要加上clear才能包含呢？
按照我的理解div框内了，图片向做浮动到左边框，文字在右边了。
--
FROM 116.247.103.* - 对，设置float之后会脱离原文档流，课程之前说明了
这点我忘记了
谢谢啊
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 当一个元素设置了浮动时，那么该元素就会脱离原文档流。。
: 因此你的例子，虽然div在逻辑上包含了img 和 p
: 但实际上或者视觉上，后面二者已经脱离了div（.news）
: ...................
--
FROM 218.107.216.* - 对了，唐僧兄
比如有两图，并排放，各对应几句话，css样式如何实现呢？
我现在想法是p里面放4个span，两个文字两个图片，控制他们位置，然后文字加br分行。
只是觉得好麻烦，有没有简便一点的方法。
大概就是下面这样子：
。。。。。。 图1 。。。。。。。。 图2
。。。。。。 图1 。。。。。。。。 图2
。。。。。。 图1 。。。。。。。。 图2
。。。。。。 图1 。。。。。。。。 图2
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 当一个元素设置了浮动时，那么该元素就会脱离原文档流。。
: 因此你的例子，虽然div在逻辑上包含了img 和 p
: 但实际上或者视觉上，后面二者已经脱离了div（.news）
: ...................
--
FROM 116.247.103.* - 没懂。。。
这些都已经是在div里面的方框的内容了。
【 在 shaolin (漫漫当爹路) 的大作中提到: 】
: 定宽float
--
FROM 116.247.103.* - 可是那个图是一个整体，就两张图，里面有几格。
每行文字对应的一格。
你的意思是列表4行，左边文字，图1，中间文字，图2，左浮动，然后文字自动换行？
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 你这个例子用列表比较合适，对列表进行左浮动
: 确定宽度后自动换行
--
FROM 116.247.103.* - 谢谢
我试了一下，其他没问题，就是我列表float left的时候为何会有空隙呢？
截图之后你帮我看看原因？我用了outside也不行：（
代码：
<div>
<div style="float: left;">
<ul class="jiyu">
<li><span style="font-size:14px;font-family:微软雅黑
,microsoft yahei;">基
于</span>
。。。
</li>
</div>
</div>
css：
.jiyu {float: left; font-size:14px; font-family:微软雅黑,microsoft yahei; li
st-style-type:none; list-style-position: outside;}
.jiyu li{padding-top:10px; list-style-position: outside;}
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 如果图是一个整体，可以考虑将图片作为背景
: 这样你只需控制文字格式即可
: 怎样处理合适，要看你实际情况来
: ...................
--
FROM 58.23.89.* - 图片
为何“基于”左边会有空隙呢？
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 如果图是一个整体，可以考虑将图片作为背景
: 这样你只需控制文字格式即可
: 怎样处理合适，要看你实际情况来
: ...................
--
FROM 58.23.89.* - firebug有同样的功能吗？
我是确定有空隙了，但是不知道什么原因造成的，或者说改不了。
一个列表是必然会有空隙吗？怎么才能让列表和前面段落内容对齐呢？我用了padding-left 但是没有效果：（
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 光看图不好确认
: 你先设置一个通用格式：
: *{margin: 0;padding: 0;}
: ...................
--
FROM 116.247.103.* - 其实我觉得无所谓
可是别人要求改，我也没办法。
【 在 zzjyingzi (十六点五) 的大作中提到: 】
: 貌似能改，只是我觉得有空隙更好。
--
FROM 116.247.103.* - 谢谢你
呵呵 虽然我没明白你的目的
我也变了背景色，可是不知道怎么找出问题。
不过我试了试，应该是在css jiyu类里加上padding和margin=0就可以了。
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 列表不是必然有空隙的。。
: 单看你这代码，看不出为啥没对齐。。
: 你把各个块用背景色渲染一下不就比较出来了？
: ...................
--
FROM 218.107.216.*