将div排成一列

1.在子元素使用display:inline-block

注意子元素宽度加上边距不能超过父元素宽度,否则就在下一行展示

<style>
  #back{
				border: red solid 1px;
				width: 800px;
				height: 500px;
			}
			#back div{
				border: blue 1px solid;
				width: 100px;
				height: 100px;
				margin: 20px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="back">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

2.在父元素使用display: flex;

posted @   lwx_R  阅读(225)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示