,可以使用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就会以水平方向排列,并且当点击或聚焦时,会出现选中的效果。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云