Question

html语言、CSS的float属性问题设置左浮动，显示不正常。

在dw里插入三张图片 每插入一张后面一个回车 三张图片竖着排在最左边 在CSS里 给img标签加上float:left; 属性 三张图片朝四点方向排列 这是怎么回事啊 ？

Answer 1

在css里面，图片默认是横排的，虽然添加了左浮动，除了第一张以外其他图片都会被挤到其他位置。要解决这个问题可以将图片放置在三个<div></div>中。
如：
<style type="text/css">
<!--
.picfloat{text-align:left;}
-->
</style>
<div class="picfloat"><img src="pic1" width="***" height="***"></div>
<div class="picfloat"><img src="pic2" width="***" height="***"></div>
<div class="picfloat"><img src="pic3" width="***" height="***"></div>

说明：text-align:left; 设置<div>中的内容左对齐。

追问

哈哈 朋友 我这只是想做一个实验 用的img做的 本来只是想看看效果 后来却弄不明白为什么都朝着四点钟方向排列呢？

Answer 2

啊！！晕！！
你知道什么是块级元素，什么是内联元素。
img是内联元素，加FLOAT就是画蛇添足

追问

好吧 我这其实只是想做一个实验 用的img做的 想看看效果 那为什么都朝着四点钟方向排列呢？

追答

因为在你的图片之间有

追问

哈哈 说得对 就是这个问题 要是没有的话 就是一条直线 我可以理解 那为什么加上了就不行了呢？ 而且 怎么设置一下才能让既有p也竖直排列呢？ 是调整行高吗？

追答

那要有外容器

追问

我知道 你是说DIV嘛？ 那除了加DIV 仅仅是改CSS设置的话 不行吗？

追答

仅CSS也可以但是要对P也加样式

参考资料： P

Answer 3

你想要什么效果

追问

我这只是做一个实验 想看看最终效果 却发现变成这个样子了 为什么都朝着4点方向排列呢？