div同行显示

倒骑驴走着瞧

已于 2022-06-24 23:17:09 修改

阅读量218

点赞数

分类专栏： css 文章标签：前端 javascript

于 2022-06-23 23:17:09 首次发布

本文链接：https://blog.csdn.net/nongminkouhao/article/details/125436637

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

同行显示 float 属性 left right
div 内容居中居左居右 text-align left right center

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
	.main{width:400px;}
	.left{width:20%;background:yellow;float:left;text-align:right}
	.right{width:80%;background:red;float:right;}
</style>
</head>

<body>
<div class="main">
	<div class="left"> 姓名:</div><div class="right"> 孙悟空</div>
	<div class="left"> 姓名:</div><div class="right"> 张三</div>
	<div class="left"> 姓名:</div><div class="right">李四</div>
</div>


</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
	.main{width:400px;}
	.left{width:20%;background:yellow;float:left;text-align:right}
	.right{width:80%;background:red;float:right;}
	.bottom{width:100%-20px;text-align:center;background:blue;padding:10px 20px 10px}
	.clearfix{clear:both}
</style>
</head>

<body>
<div class="main">
	<div class="left"> 姓名:</div><div class="right"> 孙悟空</div>
	<div class="left"> 姓名:</div><div class="right"> 张三</div>
	<div class="left"> 姓名:</div><div class="right">李四</div>
	<div class="clearfix"/>
	<div class="bottom">
		<button>确认</button>
		<button>取消</button>
	</div>
</div>


</body>
</html>

在这里插入图片描述