Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

css - CSS中的条件多列

In lại Tác giả: Walker 123 更新时间：2023-11-28 08:40:57 27 4
mua khóa gpt4 Nike

我有一个包含一些子菜单的菜单，比如这个

.menu {
  vị trí: tuyệt đối;
  background: yellow;
  margin-top: 2em;
}
tiêu đề {
  cỡ chữ: 20px;
}
ul {
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 10px;
  kiểu danh sách: không có;
  phần đệm: 0;
}
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }
div:not(.main) {
  hiển thị: khối nội tuyến;
  vị trí: tương đối;
}
menu one
  

    
menu one header

    

          
  • Item one

    •       
  • Item two 2

    •       
  • Item tree

    •       
  • Item four

    •       
  • Item five

    •       
  • six

    •       
  • Item 7

    •     

  


menu two

只有当 .menu>ul 列表中有超过 4 个条目时，我才需要显示 2 列。

是否可以使用纯 CSS？

câu trả lời hay nhất

您可以使用此处描述的技巧 - http://alistapart.com/article/quantity-queries-for-css , @Jesse Kernaghan in the comments above 建议.

但是，为了能够做到这一点，您需要硬连线一些事情:

  1. 固定容器ul的高和宽，
  2. 固定lý 的高度并确保此宽度乘以N 等于容器ul 的高度。其中 N 是您的魔数(Magic Number)，在您的例子中是 4.

这是必需的，这样 CSS columns 就不会重排内容，并且 lý 以可预测的方式排列到列中。

如果您的标记和用例可以使用上述两个约束，那么您可以使用以下 CSS 选择器:

li:nth-last-child(4):first-child, 
li:nth-last-child(4):first-child ~ li {
  chiều rộng: 160px;
}

第一个选择器将选择 lý，它是倒数第 4 个 ，也恰好是第一个，有效地只选择第一个 lý 在一组恰好四个 lý 中，其中 4 是您的魔数(Magic Number)。

第二个选择器(通用兄弟组合器)将选择第一个选择器之后存在的所有 lý.

对这些 lý 应用固定宽度，使一列看起来仿.

示例片段:

div.menu {
  display: inline-block; vertical-align: top;
  background: yellow; margin: 2em 1em;
}
header { font-size: 20px; }
ul {
  width: 160px; -moz-columns: 2 auto; -moz-column-fill: auto;
  -webkit-columns: 2 auto; columns: 2 auto;
  list-style: none; padding: 0; height: 8em;
}
li { height: 2em; }
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }

li:nth-last-child(4):first-child, li:nth-last-child(4):first-child ~ li {
  chiều rộng: 160px;
}

  
menu one

  

        
  • Item one

    •     
  • Item two 2

    •     
  • Item tree

    •     
  • Item four

    •     
  • Item five

    •     
  • six

    •     
  • Item 7

    •   



  
menu two

  

        
  • Item one

    •     
  • Item two 2

    •     
  • Item tree

    •     
  • Item four

    •   



  
menu three

  

        
  • Item one

    •     
  • Item two 2

    •     
  • Item tree

    •     
  • Item four

    •     
  • Item five

    •

关于css - CSS中的条件多列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32784830/

27 4 0
Đề xuất bài viết: css - 为什么我的 div 不向右移动？
Đề xuất bài viết: Cách hiển thị trang html bên trong div trang html khác mà không cần sử dụng jquery
Đề xuất bài viết: ios - 不同方向的快速布局
Đề xuất bài viết: html - Picturefill 是否会因为使用 RegEx 获取正确的图像而减慢客户端的浏览器速度？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress