84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
1.想要实现一种布局 如果p的数量小于或等于2则里面的内容是水平居中,如果内容超过了2个 则第三个只显示一半通过滚动来显示全内容。 这三种情况想用共通的css来实现 现在我的想法是用flex方式 但是没整出来。情况1:
此处放图片 此处放图片 此处放图片
此处放图片
情况2:
此处放图片 此处放图片
情况3:
现在样式是这样写的ul{
display:flex; align-items: center; } li{flex: 1;flex-shrink: 1;}
走同样的路,发现不同的人生
如果我没有理解错的话,您的意思是第三个开始的样式和前两个不一样,那么就可以使用这个选择器:
li{ 前两个的样式 } li:nth-child(2){ 第三个的样式 }
这种问题只靠一个flex是无法解决的。可以分别设置三种样式,通过js判断p的个数对ul添加不同的class。
ul.flexul{ display:flex; //不换行居中 align-items: center; flex-wrap:no-wrap; overflow:scroll; } //获取li的个数 var linumber= $(".flexul li").length; if($(".flexul li:eq(2)")){ var lithreewidth=$(".flexul li:eq(2)").offsetWidth; } if(linumber>2){ $(".flexul").css(" align-items","flex-start"); $(".flexul li:eq(0)").css("margin-left",lithreewidth/2+"px"); }
如果我没有理解错的话,您的意思是第三个开始的样式和前两个不一样,那么就可以使用这个选择器:
这种问题只靠一个flex是无法解决的。
可以分别设置三种样式,通过js判断p的个数对ul添加不同的class。