时间:2021-07-01 10:21:17 帮助过:54人阅读
点击增加一侧文字,另一侧背景也增加。
html代码:
<div id="container"> <div class="left">haorooms多列等高布局左</div> <div class="right" id="rights">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div></div>
方法一: 使用正负 margin 与 padding 相冲的方式实现
#container{ width:400px; margin:0 auto; background:#eee; overflow:hidden;}.left,.right{ width:200px; float:left; font-size: 16px; line-height:24px; color:#333; padding-bottom:5000px; margin-bottom:-5000px;}.left{ background-color: deeppink;}.right{ background-color:yellowgreen;}
给一个足够大的padding和负margin
二、使用 display:flex 的方式实现
这个方式很简单,移动端我们经常用,container 设置为display:flex,子元素设置为flex:1就可以了。
三、display:table-cell 实现
和上面方法类似,container 设置为display:table;,子元素设置为display:table-cell;就可以了。
四、 父容器设置背景色实现
如下:
#container{ width:400px; margin:0 auto; background-color: deeppink; overflow:hidden;}.left,.right{ width:200px; float:left; font-size: 16px; line-height:24px; color:#333;}.right{ background-color:yellowgreen;}
五、父容器多重背景色--线性渐变
#container{ width:400px; margin:0 auto; background-image: linear-gradient(90deg, yellowgreen 50%, deeppink 0); overflow:hidden;}.left,.right{ width:200px; float:left; font-size: 16px; line-height:24px; color:#333;}
六、border实现
#container{ border-left:200px solid yellowgreen; background-color:deeppink; width:200px; font-size: 16px; line-height:24px; color:#333; } .left{ width:200px; margin-left:-200px; float:left; }
多列均匀布局
方法一:display:flex
这种方法上面也讲过,实现起来比较简单,适合移动端布局。
方法二:借助伪元素及 text-align:justify
html代码如下:
<div class="container"> <div class="justify"> <i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> </div></div>
css代码如下:
.justify{ text-align: justify; text-align-last: justify; // 新增这一行}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center;} text-align-last兼容性不是很好,可以使用::after, .justify{ text-align: justify;}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center; border-radius:50%;}.justify:after { content: ""; display: inline-block; position: relative; width: 100%;}
列表布局边界线问题
方法一:margin负边距
思路:
外层设置width,overflow设置为hidden,内层设置负边距,margin-left:-1px;就可以把左侧边距隐藏
html代码如下:
<div class="ul-container"> <ul> <li>haorooms</li> <li>测试</li> <li>hao测试</li> <li>右侧</li> <li>边界线</li> <li>消失</li> <li>测试</li> </ul></div>
css代码:
ul{ width: 300px; margin-left:-1px;}li{ float:left; width:99px; line-height:30px; text-align:center; border-left:1px solid #999; font-size:18px; margin-bottom:10px;}.ul-container{ width: 300px; margin: 50px auto; overflow:hidden; background: #eee; padding:10px 0;}
方法二 :使用伪类选择器
// 使用伪类选择器,选择第 3n 个元素去掉边框li:nth-child(3n){
border-right:none;}
在工作中常见的问题就这么多了,更多精彩请关注Gxl网其它相关文章!
相关阅读:
CSS3怎么制作蝴蝶飞舞的动画
css3点击显示涟漪特效
利用CSS3怎么做出不规则图片的切换特效制作
以上就是css的开发小技巧的详细内容,更多请关注Gxl网其它相关文章!