                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

<!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>

svc124

2016-03-26

源自：初识HTML(5)+CSS(3)-升级版 13-4

关注问题我要回答

2304

操作

收起

7 回答

苦逼的代码狗回答被采纳 +3 积分
2016-03-26

h1和p都有默认的外边距

去掉就好

div,h1,p{

width:300px;

height:100px;

border:1px solid red;

float:left;

margin：0；

}

1 回复有任何疑惑可以回复我~

#1

svc124 提问者

なるほうど、Merci

2016-03-26 回复有任何疑惑可以回复我~

风_起
2016-03-26

补充一句上面的1：变为内联块状，但是由于你又设置width:300px；所以可以看出这几个块宽度是一样的（然而问题的重点不在这）；

请看第2点。如果觉得合理，就选为最佳。谢谢！

0 回复有任何疑惑可以回复我~

qq_穿越时空_1
2016-03-26

margin

0 回复有任何疑惑可以回复我~

风_起
2016-03-26

额，1.注释错了。你看http://www.imooc.com/learn/9 最后一节，当设置float:left时，块状元素就会变为内联块状元素，宽度默认是内容的大小；

2.解决对齐问题：看到没？box2和box1是对齐的。这是为什么呢？原因很简单，div/h1/p等各种标签margin-top等一些属性默认值是不一样的。这时你想要对齐，就要指定各个目标元素的margin-top为同一个值。

1 回复有任何疑惑可以回复我~

jiangjiajia
2016-03-26

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

0 回复有任何疑惑可以回复我~

绝对小黑
2016-03-26

<!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

<!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 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225293 人
解答问题 18230 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

4 回答怎么清除浮动

2 回答浮动float怎么用

7 回答关于加了浮动后，文字由底对齐变成顶对齐的疑问？

5 回答什么是浮动模型

2 回答浮动模型是相对于什么定位的？只能左右上下浮动吗？可以设置浮动距离吗？

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载