H5+CSS3之如何简单的实现自适应一排两列布局

原创

于 2018-05-18 11:38:22 发布 · 9.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #CSS3 #flex #一排两列布局

本文介绍了如何利用HTML5和CSS3的Flexbox特性，简单实现网页一排两列的自适应布局。通过设置display:flex，flex-direction:row，flex-wrap:wrap以及justify-content:space-between，可以实现元素水平排列并自动换行，同时保证元素间的间隔相等。此外，通过调整margin样式，还能实现无上下边距的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：

再来代码：

<body>
	<section>
		<ul class="box">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</section>
</body>

<style>
	html,body,section{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.box{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content:space-between;
		background: darkseagreen;
	}
	.box li{
		width: calc(50% - 5px);
		height: 100px;
		background:mistyrose;
		margin: 5px 0;
	}
</style>

代码橙色部分为关键。运用C3的