通过CSS实现多个div水平选取框

，可以使用Flexbox布局和伪类选择器来实现。

首先，在包含这些div的父容器上设置display为flex，这将创建一个Flexbox容器。然后，使用flex-wrap属性来控制内容的换行方式，使得div能够水平排列并自动换行。

接下来，对每个div应用伪类选择器:active或:focus来设置选中效果。可以通过设置背景色、边框等样式来突出显示选中的div。

以下是一个示例代码：

HTML代码：

<div class="container">
  <div class="box">选项1</div>
  <div class="box">选项2</div>
  <div class="box">选项3</div>
  <div class="box">选项4</div>
  <div class="box">选项5</div>
  <div class="box">选项6</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

.box:active,
.box:focus {
  background-color: #f0f0f0;
  outline: none;
}

这样，多个div就会以水平方向排列，并且当点击或聚焦时，会出现选中的效果。

腾讯云相关产品推荐：