问

html - css布局的设置问题

mobiledu2502853597 发布于 2022-11-03 17:49

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

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

情况2：

    此处放图片
    此处放图片

情况3：

    此处放图片

现在样式是这样写的
ul{

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

3 个回答

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

2022-11-05 19:40 回答

端庄的一白_167

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

2022-11-05 19:45 回答

蜀南竹海的天空
如果我没有理解错的话，您的意思是第三个开始的样式和前两个不一样，那么就可以使用这个选择器：
```
li{
    前两个的样式
}
li:nth-child(2){
    第三个的样式
}
```
2022-11-05 19:48 回答

静静静静静静妹儿_

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签