html - css布局的设置问题
怪我咯
怪我咯 2017-04-17 13:29:01
0
3
877

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

    <li><p>此处放图片</p></li>
    <li><p>此处放图片</p></li>
    <li><p>此处放图片</p></li>
</ul>

情况2:<ul>

    <li><p>此处放图片</p></li>
    <li><p>此处放图片</p></li>
  </ul>

情况3:<ul>

    <li><p>此处放图片</p></li>
</ul>

现在样式是这样写的
ul{

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

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

全部回复(3)
洪涛

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

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

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

大家讲道理

雷雷

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板