css3实现两端对齐

方法一：使用box-pack的justify实现：使用display：flex弹性盒子模型实现根据窗口大小自适应宽度。代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><style>*{margin: 0;padding: 0;}.container{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin-top: 30px;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack:justify ;justify-content: space-between;}.container a{width:20%;display: block;height: 50px;line-height: 45px;text-align: center;border 1px solid red;color: sandybrown;font-size: 16px;margin-bottom: 5px;border-radius: 3px;background-color: skyblue;text-decoration: none;} </style></head><body><div class="container"><a class="link" href="#">10</a><a class="link" href="#">20</a><a  class="link" href="#">30</a><a class="link" href="#">50</a></div></body>
</html>

效果如下：

方法二：使用column多列布局实现，具体代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><title></title><style>*{margin: 0;padding: 0;}.container{-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;margin-top: 100px;}.container a{display: block;height: 50px;line-height: 50px;text-align: center;border: 1px solid sandybrown;color: #0066CC;font-size: 16px;margin-bottom: 5px;border-radius: 4px;background-color: salmon;text-decoration: none;}</style></head><body><div class="container"><a class="link" href="#none">10元</a><a class="link" href="#none">20元</a><a class="link" href="#none">30元</a><a class="link" href="#none">50元</a></div></body>
</html>

效果如下：

css3实现两端对齐相关推荐

css3 怎样让文字两边对齐,CSS3两端对齐实现方法
CSS3两端对齐实现方法时间:2018-01-18 来源:CSS3两端对齐讲解大家都知道 text-align 属性是规定元素中的文本的水平对齐方式,最常用的值是left.right.ce ...
html表格如何两段对齐,用css3多列属性实现css两端对齐
要实现css两端对齐,我在网上找了很多方法,都不怎么实用,都是兼容性闹得,column是css3的属性,是多列布局,使用column来实现两端对齐简单实用,就要设置下模块的个数跟column的列数一致 ...
css3总结之： text-align: justify （两端对齐）
text-align: justify: 大家都知道 text-align 属性是规定元素中的文本的水平对齐方式,最常用的值是left.right.center,那么justify是什么呢? 在W3C ...
css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
用 justify-content 属性设置子元素两端对齐
外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐 <!DOCTYPE html> <html> <head> ...
css+分散,【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
html语言两端对齐末行首对齐,css两端对齐之div+css布局实现2端对齐的4种方法总结...
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构实现demo里面的div通过Css进行2端对齐. 1 2 3 1.margin负值的方式 ...
html文字两端对齐 w3school,css两端对齐
css两端对齐[编辑] 概述 CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计.是目前基于文本展示最优秀的 ...
chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...

css3实现两端对齐

css3实现两端对齐相关推荐

最新文章

热门文章