浮动怎么都是对不齐乱浮啊

个回答

苦逼的代码狗

2016-03-26 16:12:09

已采纳

h1和p都有默认的外边距
去掉就好
div,h1,p{
    width:300px;
    height:100px;
    border:1px solid red;
    float:left;
margin：0；
}

1
风_起

2016-03-26 16:23:42

补充一句上面的1：变为内联块状，但是由于你又设置width:300px；所以可以看出这几个块宽度是一样的（然而问题的重点不在这）；
请看第2点。如果觉得合理，就选为最佳。谢谢！

0
qq_穿越时空_1

2016-03-26 16:23:16

margin

0
风_起

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为同一个值。

1
jiangjiajia

2016-03-26 16:13:31

全都更改为div可以 p h1 本身是带有隐含样式的比如h1 是有字体大小的设置的

0
绝对小黑

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>
<h1>标题</h1>
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p>

<div id="box1">box1</div>

</body>
</html>

0
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>
<div>标题</div>
<div>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</div>

<div id="box1">box1</div>
</body>
</html>

0