html布局,下面怎么使两个div在同一行显示?

html布局,下面怎么使两个div在同一行显示?,第1张

实现两个DIV盒子并排,一行只显示两列DIV布局,使用width宽度+float浮动即可实现一行显示两列DIV布局。

<!DOCTYPE html> 

<html> 

<head> 

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

<title>两个DIV并排</title> 

<style> 

.div-a{ float:leftwidth:49%border:1px solid #F00} 

.div-b{ float:leftwidth:49%border:1px solid #000} 

</style> 

</head> 

<body> 

<div class="div-a">第一个DIV盒子</div> 

<div class="div-b">第二个DIV盒子</div> 

</body> 

</html>

以下是具体演示步骤:1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。2、在body标签里添加一个大div来容纳并列的div。3、在大div里添加想要并列的div元素,并在style属性里添加float:left即可4、运行结果如下图。无论如何变换浏览器宽度,div都是一行展示出来。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7083850.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-01
下一篇2023-04-01

发表评论

登录后才能评论

评论列表(0条)

    保存