css 实现三个 div 等分排在一行

（1）box-sizing: border-box;实现：

<!DOCTYPE html>
<html>
<head><title>border-box 实现三个div等分排在一行</title><style> *{padding:0;margin:0;}.container{width: 800px;background:#ccc;margin: 100px auto;}.item{box-sizing: border-box;  /*border计算在width中*/-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width: 33.33%;height: 300px;border:1px solid black;float:left;}.container:after{display: block;clear: both;content: ".";height: 0;visibility: hidden;display: block;}</style>
</head>
<body><div class="container"><div class="item">这是第一个div</div><div class="item">这是第二个div</div><div class="item">这是第三个div</div></div>
</body>
</html>

如果不设置box-sizing只设置width：33.33%，很容易出错，因为margin，border和padding不计算在盒子的width中，所以33.33%达不到效果，可能会因为margin和padding 整体的宽度超过了100%，所以需要设置box-sizing: border-box;

（2）flex 实现：

<!DOCTYPE html>
<html>
<head><title>border-box 实现三个div等分排在一行</title><style> *{padding:0;margin:0;}.container{width: 800px;background:#ccc;margin: 100px auto;display: flex;display: -webkit-flex; /* Safari */}.item{flex:1;height: 300px;border:1px solid black;}</style>
</head>
<body><div class="container"><div class="item">这是第一个div</div><div class="item">这是第二个div</div><div class="item">这是第三个div</div></div>
</body>
</html>

css 实现三个 div 等分排在一行相关推荐

实现一个行内三个div等分_css 实现等分布局
目前移动版等分布局最常用的是 flex 等分,pc 端上用得更多则是 float. 假设父元素下有 3 个子元素,每个子元素相隔 24px,子元素等分父元素宽度实现:float + margin ( ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
实现一个行内三个div等分_一个div，包含三个小的div,平均分布的样式
从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...
html列自动变高,HTML_CSS三行三列DIV高度自适应的设置，用脚本控制三行三列div高度自 - phpStudy...
CSS三行三列DIV高度自适应的设置用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应 ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
三个并排居中html,css如何让三个DIV并列在一行中
--好评和差评--&gt:center;100&lt:73px;} html文件.news_con_oth{height:right; width:hidden:470px; < ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局
圣杯布局圣杯布局是典型的 CSS 布局问题,有着众多的解决方案. 圣杯布局是一种非常经典和常用的布局方式,其所指的是三列布局,中间宽度自适应,两边定宽:或者两列布局,主体宽度自适应,左边或右边定宽. ...
xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft"&g ...

css 实现三个 div 等分排在一行

css 实现三个 div 等分排在一行相关推荐

最新文章

热门文章