搜尋

首頁  >  問答  >  主體

html - css布局的设置问题

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;}
怪我咯怪我咯2781 天前894

全部回覆(3)我來回復

  • PHP中文网

    PHP中文网2017-04-17 13:31:01

    如果我沒有理解錯的話,您的意思是第三個開始的樣式和前兩個不一樣,那麼就可以使用這個選擇器:

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

    回覆
    0
  • 黄舟

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

    這種問題只靠一個flex是無法解決的。
    可以分別設定三種樣式,透過js判斷p的個數對ul加上不同的class。

    回覆
    0
  • 大家讲道理

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

    雷雷

    回覆
    0
  • 取消回覆