html - css布局的设置问题-PHP 중국어 네트워크 Q&A

기사 주제 학습 다운로드 Q&A 프로그래밍 사전 게임 최근 업데이트

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

html - css布局的设置问题

怪我咯 2017-04-17 13:29:01

810

1.想要实现一种布局如果p的数量小于或等于2则里面的内容是水平居中，如果内容超过了2个则第三个只显示一半通过滚动来显示全内容。这三种情况想用共通的css来实现现在我的想法是用flex方式但是没整出来。
情况1:

此处放图片
 此处放图片
 此处放图片

情况2：

此处放图片
 此处放图片

情况3：

此处放图片

现在样式是这样写的
ul{

display:flex; align-items: center; } li{flex: 1;flex-shrink: 1;}

怪我咯

走同样的路，发现不同的人生

모든 응답 (3)

洪涛2017-04-17 13:31:01 3층

如果我没有理解错的话，您的意思是第三个开始的样式和前两个不一样，那么就可以使用这个选择器：

li{ 前两个的样式 } li:nth-child(2){ 第三个的样式 }

좋다+0

답글 추가

黄舟2017-04-17 13:31:01 2층

这种问题只靠一个flex是无法解决的。
可以分别设置三种样式，通过js判断p的个数对ul添加不同的class。

좋다+0

답글 추가

大家讲道理2017-04-17 13:31:01 1층

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"); }

좋다+0

답글 추가