浮动怎么都是对不齐乱浮啊
svc124
2016-03-26 16:03
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
div,h1,p{
width:300px;
height:100px;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>
7回答
-
- 苦逼的代码狗
- 2016-03-26 16:12:09
h1和p都有默认的外边距
去掉就好
div,h1,p{
width:300px;
height:100px;
border:1px solid red;
float:left;
margin：0；
}
-
- 风_起
- 2016-03-26 16:23:42
补充一句上面的1：变为内联块状，但是由于你又设置width:300px；所以可以看出这几个块宽度是一样的（然而问题的重点不在这）；
请看第2点。如果觉得合理，就选为最佳。谢谢！
-
- qq_穿越时空_1
- 2016-03-26 16:23:16
margin
-
- 风_起
- 2016-03-26 16:19:14
额，1.注释错了。你看http://www.imooc.com/learn/9 最后一节，当设置float:left时，块状元素就会变为内联块状元素，宽度默认是内容的大小；
2.解决对齐问题：看到没？box2和box1是对齐的。这是为什么呢？原因很简单，div/h1/p等各种标签margin-top等一些属性默认值是不一样的。这时你想要对齐，就要指定各个目标元素的margin-top为同一个值。
-
- jiangjiajia
- 2016-03-26 16:13:31
全都更改为div可以 p h1 本身是带有隐含样式的 比如h1 是有字体大小的设置的
-
- 绝对小黑
- 2016-03-26 16:12:12
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div,h1,p{
width:300px;
height:100px;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
<!--<br style="clear:both"/>*/-->
</body>
</html>
-
- jiangjiajia
- 2016-03-26 16:11:48
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
div,h1,p{
width:300px;
height:100px;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div>标题</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>
初识HTML(5)+CSS(3)-升级版
1225809 学习 · 18234 问题
相似问题