html中怎么样让div并排显示

最新推荐文章于 2023-11-21 12:39:45 发布

weixin_30375427

最新推荐文章于 2023-11-21 12:39:45 发布

阅读量188

点赞数

原文链接：http://www.cnblogs.com/nanyangzp/p/4829041.html

版权

html中的div默认是流式显示，每个div会占用一整行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<div>这是第一个显示的div </div>
<div>这是第二个显示的div </div>
<div>这是第三个显示的div </div>
</body>
</html>

显示效果为：

常用的方法有两种方法来改变div的布局情况：

一：采用css float浮动方法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<style>
   div{float:left;}
</style>

<div>这是第一个显示的div </div>
<div>这是第二个显示的div </div>
<div>这是第三个显示的div </div>
</body>
</html>

显示效果:

二：采用css display方式来让div并排显示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<style>
   div{float:left;}
</style>

<div>这是第一个显示的div </div>

<div>这是第二个显示的div </div>

<div>这是第三个显示的div </div>

</body>
</html>

显示效果：

三：总结

无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。

转载于:https://www.cnblogs.com/nanyangzp/p/4829041.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30375427

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中怎么样让div并排显示

html中的div默认是流式显示，每个div会占用一整行<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title></head><...
复制链接

扫一扫