将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 @ 2022-09-19 11:52  lwx_R  阅读(272)  评论(0)    收藏  举报