HTML页面布局

来源:互联网 发布:淘宝限定皮肤cdk哪来的 编辑:程序博客网 时间:2024/06/05 03:28

在用使用MUI的同时,发现了一些页面布局的问题

1.在嵌套多个DIV后,使用margin:0 auto;text-align:center无法使最后一层div中的文字居中的问题:

在最后一层包裹的div中,使用style="display:flex;justify-content:center;align-items:center;"

2.一层div内,两个div并列的并列问题


<div style="margin:2%;background: gainsboro;text-align: center;height: 36%;position: absolute;width: 96%;">
<h3 style="padding: 5%;">路线ID</h3>
<div class="centerDiv" style="float: left;background-color: #EE8262;height:50%;width: 40%;margin-left: 5%;">
<span>5.6KM</span>
</div>
<div class="centerDiv" style="background-color: #EE8262;height: 50%;width: 40%;margin-left: 55%;">
<span>330</span>
</div>
</div>


3.关于布局规范

<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>

</body>
</html>
-->

原创粉丝点击