好多时候网站的banner下面都有两排快捷入口，表现形式就是自动排列的8个图标，点击图标进入不同的页面，下面我就用自己的方式实现下排列。

下面我就用浮动的方式实现图标的排列和box的高度自适应。

<div class="menu_list">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
</div>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.menu_list {
		width: 200px;
		background: #ddd;
		overflow: hidden;
	}
	.menu_list img {
		width: 25%;
		float: left;
	}
</style>

下面我用另外一种方式实现，用flex布局来实现下看看

<div class="menu_list_flex">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
	<img src="./images/plants.png">
</div>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.menu_list_flex {
		width: 200px;
		margin-top: 20px;
		background: green;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	.menu_list_flex img {
		width: 25%;
		height: 25%;
	}
</style>