Question

我需要使用HTML和CSS（No js）创建一个包含多列的工具栏我有以下html结构：

<ul class="toolbar">
   <li><a class="tool">t1</a></li>
   <li><a class="tool">t2</a></li>
   <li><a class="tool">t3</a></li>
   <li><a class="tool">t4</a></li>
   <li><a class="tool">t5</a></li>
  <li><a class="tool">t6</a></li>
  <li><a class="tool">t7</a></li>
  <li><a class="tool">t8</a></li>
  <li><a class="tool">t9</a></li>
</ul

和css如下：

.toolbar{
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
  width:40px
}
.toolbar li{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  float:left;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

目前我为.toolbar设置了固定宽度40px。当此宽度为80px时，工具栏将更改为2列。

我想从.toolbar div中删除此固定宽度40px。并需要使它支持多列。此外，当窗口高度减小时，我需要将工具包装到多个列。不同刀具长度的工具栏顺序如下：

3栏：

1 2 3

4 5 6

7 8 9

10 11 12

2Column：

1 2

3 4

5 6

7 8

1列：

1

2

3

4

5

我需要一个纯CSS解决方案。可以请任何人帮忙

通过Multiple columns toolbar上的ajineshravi（@ajineshravi）查看笔CodePen。

Answer 1

试试这段代码

   html,body{
 height:100%;
}
.toolbar{
  display: flex;
  flex-direction: column;
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
min-width:40px;
}
a{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

当高度降低时，有没有办法扩展容器div的宽度？

1 个答案: