把几个div设置成一行_多个div合成一段文字

作者：小舞很执着 | 2024-07-23 01:06:28

踩

多个div合成一段文字

先弄一个大的div,再弄几个小的div，想设置div之间的距离用margin设置
关键代码：

1.创建一个大div  代码如下： #main {float:left;border:1px width:100%; }
2.创建一个左边小div 代码如下：#left{float:left;border:1px width:40%; }
3.创建一个右边小div 代码如下：#right {float:left;border:1px width:40%;}
1
2
3

自己练的div并列代码
html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热点新闻</title>
<link rel="stylesheet" href="style05.css" type="text/css" />
</head>

<body>
<div class="daohang">
<img src="22.jpg" width="160" height="50" align="left" />
<a href="#">首页</a>
<a href="#">国际</a>
<a href="#">军事</a>
<a href="#">社会</a>
<a href="#">财经</a>
<a href="#">娱乐</a>
<form id="shuru">
新闻：<input type="text" />
<input type="submit" value="搜索" />
</form>
</div>

<div>
<h2 class="head">热点新闻</h2>
</div>
<div class="dahe">
<div class="div1">
<ul class="content">
<li><a href="https://www.360kuai.com/pc/953a3741c8986f0f2?kuai_so=1&sign=360_6aa05217&cota=3&tj_url=so_vip&refer_scene=so_52">中国谁的恐吓也不怕</a></li>
<li><a href="https://www.360kuai.com/pc/9fce128baaafb3014?kuai_so=1&sign=360_6aa05217&cota=3&tj_url=so_vip&refer_scene=so_52">智障男顶替富人火化</a></li>
<li><a href="https://www.360kuai.com/pc/972197fe2fe467798?kuai_so=1&sign=360_6aa05217&cota=3&tj_url=so_vip&refer_scene=so_52">18岁少年成亿万富豪</a></li>
<li><a href="https://www.360kuai.com/pc/95e0772bd6d5ae19f?kuai_so=1&sign=360_6aa05217&cota=3&tj_url=so_vip&refer_scene=so_52">打击网络炫富乱象</a></li>
<li><a href="https://www.360kuai.com/pc/9cd63aa406940459b?cota=3&sign=360_6aa05217&refer_scene=so_52">武汉解封一周年</a></li>
</ul>
</div>
<div class="div2">
<ul class="content">
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
</ul>
</div>
<div class="div3">
<ul class="content">
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
</ul>
</div>
<div class="div4">
<ul class="content">
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
<li><a href="https://mini.eastday.com/nsa/n210408145635417.html">农民种700颗杨树 自己砍掉后被判刑2年</a></li>
</ul>
</div>
</div>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

css代码如下：

@charset "utf-8";
/* CSS Document */

body{
	font-size:18px;
	font-family:"宋体";
	color:#222;
}
body,h2,ul,li{
	padding:0;
	margin:0;
	list-style:none;
}
.daohang{
	width:100%;
	height:50px;
	background-color:#333;
}
.daohang a{
	line-height:50px;
	margin-left:110px;
	text-decoration:none;
}
.daohang a:hover{
	color:#F00;
}
#shuru{
	
	float:right;
	line-height:30px;
	padding-top:10px;
	margin-right:110px;
	color:#FFF;
	
}
.head{
	font-size:18px;
	color:#000;
	height:100px;
	line-height:100px;
	margin-top:10px;
	border-bottom:1px solid #cc5200;
	background:#f60 url(47.jpg)  left top;
	padding-left:34px;
}
.dahe{
	float:left;border:1px;
	width:100%;
	height:500px;
}
.div1{
	float:left;border:1px;
	width:20%;
	height:500px;
	margin-right:100px;
	margin-left:10px;
}
.div2{
	float:left;border:1px;
	width:20%;
	height:500px;
	margin-right:100px;
}
.div3{
	float:left;border:1px;
	width:20%;
	height:500px;
	margin-right:100px;
}
.div4{
	float:left;border:1px;
	width:20%;
	height:500px;	
}

.content{
	padding:25px 0 0 15px;
	background:#fff5ee;
}
.content li{
	height:100px;
	background:url() no-repeat left top;
	padding-left:22px;
}
.content li a:link,.content li a:visited{
	color:#666;
	text-decoration:none;
}
.content li a:hover{
	color:#0F0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

嗯…这个网页还算目前比较满意的
也就这样了，继续努力

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】