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

12-4 只讲了2个块元素的水平排列。如果现在有3个，4个或者更多个块元素需要水平等间隔排列，该如何写代码呢？？注意，是水平等间隔排列！！！不是连着一起都挤在最左边或者最右边。

12-4 只讲了2个块元素的水平排列。如果现在有3个，4个或者更多个块元素需要水平等间隔排列，该如何写代码呢？？

注意，是水平等间隔排列！！！不是连着一起都挤在最左边或者最右边。

Jack_No_1

2016-12-04

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

关注问题我要回答

1554

操作

收起

8 回答

杨阳4000193 回答被采纳 +3 积分
2016-12-04

直接在选择器里写float:left;就行

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

#1

Jack_No_1 提问者

不好意思，是我没把问题表述清楚，说漏了，比如现在有3个块元素在水平排列，分别为div1，div2和div3，我要达到的效果是div1在那一整行的最左边，div3在最右边，div2在最中间，他们之间有间隔，并且是相等的，而不是3个连着一起都排列在最左边或者连着排列在最右边？然后就是4个，5个以及更多个的块元素水平的，间隔相等的排列在一行？？？

2016-12-04 回复有任何疑惑可以回复我~

#2

杨阳4000193 回复 Jack_No_1 提问者

那就设置padding margin的值

2016-12-04 回复有任何疑惑可以回复我~

#3

Jack_No_1 提问者

回复杨阳4000193;噢噢，对对对，学到后面前面的忘掉了

2016-12-04 回复有任何疑惑可以回复我~

慕斯8321650
2018-06-23

同志看图，是否达到你的要求

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

honey菠萝吹雪
2017-05-13

还有个笨方法直接向内容加多个&nbsp控制等距就行. - -!

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

6HaHa
2017-01-12

center

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

#1

float的值是没有center的

2017-07-03 回复有任何疑惑可以回复我~

qq_微微_4
2016-12-05

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>浮动模型</title>

<style type="text/css">

div{

border:2px red solid;

width:24%;

height:400px;

float:left;

margin:1px;

}

</style>

</head>

<body>

<div id="div1">栏目1</div>

<div id="div2">栏目2</div>

<div id="div3">栏目3</div>

<div id="div4">栏目4</div>

</body>

</html>

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

慕粉4170445
2016-12-04

直接在选择器里写float:left;

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

大富啦啦
2016-12-04

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>浮动模型</title>

<style type="text/css">

div{

border:2px red solid;

width:200px;

height:400px;

float:left;

}

</style>

</head>

<body>

<div id="div1">栏目1</div>

<div id="div2">栏目2</div>

<div id="div3">栏目3</div>

</body>

</html>

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

#1

Jack_No_1 提问者

不好意思，是我没把问题表述清楚，说漏了，比如现在有3个块元素在水平排列，分别为div1，div2和div3，我要达到的效果是div1在那一整行的最左边，div3在最右边，div2在最中间，他们之间有间隔，并且是相等的，而不是3个连着一起都排列在最左边或者连着排列在最右边？然后就是4个，5个以及更多个的块元素水平的，间隔相等的排列在一行？？？

2016-12-04 回复有任何疑惑可以回复我~

泡泡菌
2016-12-04

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>浮动模型</title>

<style type="text/css">

div{

border:2px red solid;

width:200px;

height:400px;

float:left;

}

</style>

</head>

<body>

<div id="div1">栏目1</div>

<div id="div2">栏目2</div>

<div id="div3">栏目3</div>

<div id="div4">栏目4</div>

</body>

</html>

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

#1

Jack_No_1 提问者

不好意思，是我没把问题表述清楚，说漏了，比如现在有3个块元素在水平排列，分别为div1，div2和div3，我要达到的效果是div1在那一整行的最左边，div3在最右边，div2在最中间，他们之间有间隔，并且是相等的，而不是3个连着一起都排列在最左边或者连着排列在最右边？然后就是4个，5个以及更多个的块元素水平的，间隔相等的排列在一行？？？

2016-12-04 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

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

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

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

本课相似问答

3 回答4或5个模型水平对齐排列

5 回答内联块状元素水平居中

3 回答块级元素在整个网页界面水平垂直居中如何设置？

3 回答如果三个块元素该怎么并列一行？还有块元素如何居中？

2 回答不定宽块元素的水平居中问题

搜索更多本课相关问答

12-4 只讲了2个块元素的水平排列。如果现在有3个，4个或者更多个块元素需要水平等间隔排列，该如何写代码呢？？注意，是水平等间隔排列！！！不是连着一起都挤在最左边或者最右边。

我要回答关注问题

意见反馈帮助中心 APP下载