一行中有3个div,并且要使div分别向左、居中、向右对齐 |
您所在的位置:网站首页 › 如何让文字在div的中间对齐出来 › 一行中有3个div,并且要使div分别向左、居中、向右对齐 |
首先第一种方法是: 一行里面有3个div,怎么做到左边和右边中间对齐 .content { overflow: hidden; /*清除浮动*/ } .box1 { width: 200px; height: 200px; background-color: #000; float: left; } .box2 { width: 600px; height: 200px; background-color: #342; margin: 0 auto; position: relative; } .box3 { width: 200px; height: 200px; background-color: #098; float: right; } /*利用的原理就是左边和右边进行浮动,然后中间给出你想要的宽高,然后使用margin:0 auto进行居中,因为左右浮动后就不会占用文档流了。但是一定要注意放置的位置,中间的一块要放在左右的后面才可以*/ 左边 右边 中间第二种方法是: 注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 那我们怎么使用flex去写呢? 只需要在父级给display: flex; justify-content: space-between;这两个即可 登录 注册 购物车 .header{ width: 100%; height: 84px; display: flex; justify-content: space-between; } .header-left{ width: 140px; height: 62px; padding-top: 11px; } .header-left img{ width: 100%; height: 100%; } ul{ overflow: hidden; margin: 0px; padding: 0px; } .header-right>ul>li{ float: left; margin-right: 20px; line-height: 84px; }这样做出来的结果就是比较完美的,就算你是缩小屏幕你的布局也不会乱 当然了上面的 space-between并不是只有一个, space-between表示的使中间两头对齐,中间居中对齐,justify-content:后面一共可以跟6中属性,就是下面图中的。 注意:使用flex之后就不要在使用float,因为float已经没有效果了 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |