您现在的位置是：网站首页 > 代码编程 > WEB前端WEB前端

【原】如何使三个div均分父级div

不忘初心 2019-06-27 围观() 评论() 点赞() 附件(1) 【WEB前端】

简介：在一些网页设计中，经常会涉及到div均分，那怎么在一个div里均分元素呢？div怎么等分才可以使得div内子元素平均分配？

在一些网页设计中，经常会涉及到div均分，那怎么在一个div里均分元素呢？div怎么等分才可以使得div内子元素平均分配？

如何使三个div均分父级div

一、百分比 + 浮动布局（主要针对三等分）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算百分比，使三个div均分父级div（子元素个数为奇数）</title>
    <style type="text/css">
    	.footer{width:600px;height:300px;margin:100px auto;background:#ddd}
		.footer div{float:left;width:30%;margin-left:2.5%;height:300px;line-height:300px;text-align:center}
    </style>
</head>
<body>
	<div class="footer">
		<div style="background:red">item1</div>
		<div style="background:pink">item2</div>
		<div style="background:orange">item3</div>
	</div>
</body>
</html>

二、利用table布局（可自己设置间距）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table布局，子元素均分父级div</title>
    <style type="text/css">
    	.footer{width:600px;height:300px;margin:100px auto;background:#ddd}
    	.footer .items{width:100%;display:table}
		.footer .items div{display:table-cell;height:300px;line-height:300px;text-align:center}
    </style>
</head>
<body>
	<div class="footer">
		<div class="items">
			<div style="background:red">item1</div>
			<div style="background:pink">item2</div>
			<div style="background:orange">item3</div>
		</div>
	</div>
</body>
</html>

三、利用flex布局（可自己设置间距）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局，子元素均分父级div</title>
    <style type="text/css">
    	.footer{width:600px;height:300px;margin:100px auto;background:#ddd}
    	.footer .items{width:100%;display:flex}
		.footer .items div{flex:1;height:300px;line-height:300px;text-align:center}
    </style>
</head>
<body>
	<div class="footer">
		<div class="items">
			<div style="background:red">item1</div>
			<div style="background:pink">item2</div>
			<div style="background:orange">item3</div>
		</div>
	</div>
</body>
</html>