首页   >   代码编程   >   WEB前端

如何使三个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>

网上还有很多其他方法,我就不一一推荐了,这三种方法在我认为最实用的,就是第一种需要注意,最好是在子元素个数为奇数的时候使用,否则计算百分比的间距很麻烦,后面两种非常好用,推荐大家使用。

div-center.html

下载次数: 17

QQ群Ⅰ: 686430774 (已满)

QQ群Ⅱ: 718410762 (已满)

QQ群Ⅲ: 638620451 (已满)

QQ群Ⅳ: 474195684

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2019-06-27

永久地址:https://www.jiweichengzhu.com/article/b1a322843c634450ba40eca7df1e5c5e

评论