div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法:

html结构

实现demo里面的div通过Css进行2端对齐。

 <div class="box">
<div class="demo">
<div></div>
<div></div>
<div></div>
</div>
</div>

1.margin负值的方式

该方法需要外面多嵌套一层来实现,通过元素的间距,做为中间层的margin溢出值来实现

 <style>
.box{
width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;
}
.box .demo{
margin-left:-10px;width:310px
}
.box .demo div{
width:.333px;/*(计算:(300-10*2)/3)*/
float:left;
margin-left:10px;
}
</style>

2.display:inline-block/text-align:justify方式

justify方式比较简单方便。只要一个简单元素做了声明,里面的元素就自动等间距两端对齐布局啦!根本无需计算每个列表元素间的margin间距,更不用去修改父容器的宽度。

注意一点:demo结构内元素必须存在【换行符】或【空格符】,否则直接连着写将不会生效

 <style>
.demo{
margin:;padding:;
text-align:justify;
text-align-last:justify;/*解决IE的支持*/
line-height:;/*解决标准浏览器容器底部多余的空白*/
}
@media all and (-webkit-min-device-pixel-ratio:){
.demo{
font-size:;/*webkit清除元素中使用[换行符]或[空格符]后,最后元素多余的空白*/
}
}
.demo:after{/*text-align-last:justify只有IE支持,标准浏览器需要使用 .demo:after 伪类模拟类似效果*/
display:inline-block;
overflow:hidden;
width:%;
height:;
content:'';
vertical-align:top;/*opera浏览器解决底部多余的空白*/
}
.demo div{
width:%;
display:inline-block;
text-align:center;/*取消上层元素的影响*/
text-align-last:center;
font-size:12px;
}
</style>

3.css3 属性 space-between

该方法基于webkit内核的webapp开发和winphone IE10及以上,常用于移动端布局。

 <style>
.demo{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
} .demo div{
width:%;
}
</style>

办公资源网址导航 https://www.wode007.com

4.css3属性column-count

column属性是多列布局,使用column来实现两端对齐只需要设置模块的个数跟column的列数一致即可,推荐使用于移动端布局

 <style>
.demo{
-webkit-column-count:;-moz-column-count:;column-count:;
-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;
} .demo div{ }
</style>

完结~~~~~有更好的实现请留言哦

css两端对齐——div+css布局实现2端对齐的4种方法总结的更多相关文章

  1. CSS学习笔记--Div+Css布局(div+span以及盒模型)

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  2. css布局------块元素水平垂直居中的四种方法

    HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...

  3. css布局两边固定中间自适应的四种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...

  4. div随页面滚动遇顶固定的两种方法(js&jQuery)

    一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...

  5. [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  6. 让DIV的滚动条自动滚动到最底部 - 4种方法

    方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="te ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS学习笔记--Div+Css布局实战(入门)

    基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...

  9. 12.04 css小测div+css...

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. python3 优惠券查询GUI程序

    from tkinter import ttkfrom tkinter import messageboximport pymssqlimport tkinterimport decimalimpor ...

  2. MAC/VMware配置双机调试简述

    Configuration 注:建议提前备份所有修改内容,可能会导致无法开机. 我的测试环境: server: windows 10 + windbg client: windows 7 Server ...

  3. bfs算法总结

    BFS(广度优先搜索) 类似于树的按层遍历 常用实现方法:队列 模板: 注意: 只能用来求解无权图的最短路径问题 队列:用来存储每一层便利得到的节点 标记:对于遍历过的结点,应将其标记,以防重复访问 ...

  4. 轻松解决Github连接缓慢、图裂问题

    1 简介 gayhub(误)github作为全世界最大的开源代码库以及版本控制系统,是用来托管项目以及学习开源技术非常好的平台,是我心中最好的学习网站,我们公众号的众多技术文章对应的数据和代码也都一直 ...

  5. 5、react-路由

    1.单页面:(只有一个index.html)(为什么要使用react-router再react中) 所有的组件都是再同一个index.html中进行显示的,它再显示的时候是怎么显示的,通过你点击的连接 ...

  6. 大厂面试过程复盘(微信/阿里/头条均拿offer,附答案篇)

    背景 本人前端,3年经验,由于个人的原因,决定跳槽,于是大概3月开始找工作,总历时大概2个月,面试了微信/阿里/头条,三家都拿到了offer,来分享一下面经. 问题比较多,而且很多面试题都是跟个人项目 ...

  7. tomcat的安装部署(windows10)

    一.Tomact下载 地址:https://tomcat.apache.org/

  8. 【Spring注解驱动开发】在@Import注解中使用ImportBeanDefinitionRegistrar向容器中注册bean

    写在前面 在前面的文章中,我们学习了如何使用@Import注解向Spring容器中导入bean,可以使用@Import注解快速向容器中导入bean,小伙伴们可以参见<[Spring注解驱动开发] ...

  9. WPF入门(2)——依赖属性

    今天我们说说依赖属性 什么是依赖属性? 当然,学术定义依旧Please Baidu:https://baike.baidu.com/item/%E4%BE%9D%E8%B5%96%E5%B1%9E%E ...

  10. SQL常用取整函数

    1.Round(column_name,decimals):用于把数值字段舍入为指定的小数位数 2.Floor(column_name): 向下取整,主要用于获得小于等于数值表达式的最大整数. 3.C ...