首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

以下是一个示例代码:

HTML代码:

代码语言:txt
复制
<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代码:

代码语言:txt
复制
.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就会以水平方向排列,并且当点击或聚焦时,会出现选中的效果。

腾讯云相关产品推荐:

  • 腾讯云云服务器(CVM):提供弹性计算能力,支持各种应用场景。详情请参考腾讯云云服务器
  • 腾讯云对象存储(COS):提供可扩展的云端存储服务,适用于存储、备份、归档和内容分发等场景。详情请参考腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery

option 4.表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本,...$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同 $(":password") //所有密码 $(":radio") /...() - 向被选元素添加一个或多个css类 removeClass() - 从被选元素删除一个或多个css类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性...树 children() - 所有直接子元素 find() - 被选元素的所有后代元素,div下所有span:$("div").find("span"); 在 DOM 树中水平遍历 有许多有用的方法让我们在...DOM 树进行水平遍历: siblings() - 所有同胞元素 next() - 下一个同胞元素 nextAll() - 所有跟随的同胞元素 nextUntil() - 两个参数之间的所有同胞元素

4.6K10
  • CSS(初级)笔记

    - 链接被点击的那一刻 一个属性多个值 table, th, td { border: 1px solid black; } 盒子模型(Box Model) 图片 边框-单独设置各边...元素居中对齐 元素水平居中margin: auto; 文本水平居中text-align: center; 垂直居中 - 使用 line-height 垂直居中 - 使用 position...以下实例选取所有元素插入到 元素中: div p { background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child selectors...以下实例选取了所有位于 元素后的第一个 元素: div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素...以下实例选取了所有 元素之后的所有相邻兄弟元素 : div~p { background-color:yellow; } div~*:匹配全部

    1.1K30

    Web前端基础(02)

    样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将html和css代码分离开 选择器 标签名选择器 格式: 标签名{样式代码} 作用: 选取页面中所有同名标签 id选择器 格式:...#id{样式代码} 作用: 选取页面中指定id的元素(id必须唯一) class选择器 格式: .class{样式代码} 作用: 选取页面中指定class值得多个元素 分组选择器 格式: div,#abc...,.c1{样式代码} 作用: 将多个选择器合并成一个选择器 属性选择器 格式: 元素名[属性名=‘值’]{样式代码} 作用:选取页面中所有指定属性名和值得元素 任意元素选择器 格式: *{样式代码} 作用...underline下划线/line-through删除线/none去掉文本修饰 文本阴影:text-shadow: 颜色 x偏移值 y偏移值 浓度(值越小越清晰) *行高:line-height:30px; 可以通过行高实现文本垂直居中...选择器 */ #p2{ color:red; } /* class选择器 */ .c1{ color:blue; } /* 分组选择器 将多个选择器通过逗号合并成一个

    1.2K20

    与Ajax同样重要的jQuery(1)

    > fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。...⑥:属性过滤选择器 通过元素的属性来选取相应的元素 [attribute] 选取拥有此属性的元素 $("div[id]") [attribute=value] 选取指定属性值为value的所有元素 [attribute...选取所有的密码元素 :radio 选取所有的单选框元素 :checkbox 选取所有的多选框元素 :submit 选取所有的提交按钮元素 :image 选取所有的图像按钮元素 :reset 选取所有重置按钮元素...:button 选取所有按钮元素 :file 选取所有文件上传域元素 :hidden 选取所有不可见元素 练习8: ² 对所有text和password,添加离焦事件,校验输入内容不能为空 ² 对...选取所有被选中项元素,如下拉列表、列表

    10K60

    前端之CSS内容

    */ p[title] { color: red; } /*用于选取带有指定属性和值的元素。...*/ p[title="213"] { color: green; } 4、分组和嵌套 4.1 分组 当多个元素的样式相同的时候,我们没有必要重复地为每个元素设置样式,我们可以通过多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式...inport 五、CSS属性相关 1、字体属性 1.1 文字字体   font-family 可以那多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。...颜色是通过CSS最经常的指定: 十六进制值,如:#FF0000 一个RGB值,如:RGB(255,0,0) 颜色的名称,如:red 还有rgba(255,0,0,0.3),第四个值为alpha,指定了色彩的透明度...4.3 float 在CSS中,任何元素都可以浮动。 浮动元素会生成一个块级,而不论它本身是何种元素。

    5.2K100

    【JavaWeb】85:jQuery的各种选择器

    CSS中基本选择器有3种,在jQuery中比CSS还多一种,依次分析: ? 为了观看更直接,将每个选择器和一个按钮绑定,通过触发点击事件完成对应的操作。...③标签选择器 格式为:$("div")。 通过它可以操作对应标签名的标签,其效果和类选择器很相似。 ④全选选择器 格式为:$("*")。这是jQuery中多于CSS的。...需要达到如下效果: ①可用元素 点击该按钮,能选取可用元素,同时给文本赋值。 ②不可用元素 要求规则同①。...③多选框选中元素 点击该按钮,能选取多选框中已经被选中的元素,同时将选中的值在控制台上打印。 ④下拉框选中元素 点击该按钮,能选取下拉中已经被选中的元素,同时将选中的值在控制台上打印。...例子中是多选框,其实单选框,下拉也都可以使用该选择器。 使用each()方法可以遍历多个元素。 使用attr("属性名")也可以获取对应属性值。 六、总结 选择器之间是可以叠加使用的。

    8.8K20

    C1 能力认证——Web基础

    多行文本 button 普通按钮 radio 单选框 checkbox 多选框 reset 表单重置按钮 submit 表单提交按钮 password 密码输入,密码字段使用圆点或星号代替 现要实现提交表单时输入的不是... link 现有以下代码片段,要求实现定义SEO的关键字, 请补全代码片段 <meta.../bg.png'); background-size: ______; } cover CSS文本属性 现需要实现英文小写转大写,请补全代码片段...>,请补全代码片段 p::_______ {content: '>';} CSDN软件工程师能力认证 before CSS优先 浏览器通过CSS...,可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级 选择器 权重 内联样式 1000 ID选择器 100 类选择器、属性选择器、伪类选择器 10 标签选择器、伪元素选择器 1 相邻选择符

    3.4K40

    CSS实现前端布局更巧妙的方案!在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

    在前端开发中,实现水平垂直居中一直是个热门话题。...随着 CSS Flexbox 布局的普及,开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。...因此,我们可以使用 margin 巧妙地通过调整子元素的外边距,实现元素的部分集中和对齐布局。...先别急,我们其实直接通过 margin 就可以直接实现的! 在这里我们可以使用 margin 的动态计算来实现等宽子项的平均分布。...通过动态计算 margin,我们能够简单而有效地实现等宽子项的平均分布,使布局更加简洁明了。 三、总结 在前端开发中,实现各种页面布局一直是一个常见的需求。

    12910

    脚本语言知识总结.

    > fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。...:input  选取所有、、和元素 :text     选取所有的文本元素 :password 选取所有的密码元素 :...样式操作 css(name,value)  css({name:value,name:value}); 同时修改多个CSS样式 基本过滤选择器与 筛选过滤 API功能是相同 $("tr:first...css(name, value)  设置一个CSS样式属性 css(properties)  传递key-value对象,设置多个CSS样式属性 设置class属性 addClass(class) ...和text 对比 ² 使用val() 获得文本、下拉、单选框选中的value ² 测试能否通过 val() 设置单选框、下拉的选中效果 <script type="text/javascript

    5K130

    jQuery 常用方法

    集合元素 $("#item~div") 选取 ID 为 item 的元素后面的所有 兄弟元素 过滤选择器,主要是通过特定的过滤规则来筛选出所需的 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同...:first") 选取所有 元素中第 1 个 元素 :last 单个元素 $("div:last") 选取所有 元素中最后 1 个 元素 not(selector...返回 示例 :input 集合元素 $(":input") 选取所有 ,, 和 元素 :text 集合元素 $(":text") 选取所有的单行文本...:password 集合元素 $(":password") 选取所有的密码 :radio 集合元素 $(":radio") 选取所有的单选框 :checkbox 集合元素 $(":checkbox"...") 选取所有不可见元素 常用方法 CSS 样式 $("#id").css(‘backgroundColor’, 'blue’); CSS 样式 .css({‘color’:'red’, 'width

    2.6K50

    Web前端知识系列(包括web前端全部知识点)

    l通过jQuery可以很方便的来操作CSS样式.直接设置 CSS 样式、增加 CSS 类别、类别切换、删除等操作....$('div').addClass('myClass1'); 代码: 注意:类名没有”点” -添加多个类 addClass(class1 class2 class3...)给某个元素添加多个 CSS...)删除某个元素的一个 CSS 类 $('div').removeClass('myClass1'); -删除多个类 removeClass(class1 class2 class3…)删除某个元素的多个...jQuery 选择器实现CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种 特殊状态的选择。...p”) 选取div后代中所有p标签(包括孙子) $(“div>p”) 选取div直接后代中p标签(不包括孙子) $(“div+p”) 选取紧跟div后的兄弟元素中第一个p $(“div~p”) 选取紧跟后的兄弟元素中的所有

    2.2K10

    前端硬核面试专题之 CSS 55 问

    行内、浮动或绝对定位之间的外边距不会合并。);而 inline 以水平方式布局,垂直方向的 margin 和 padding 都是无效的,大小跟内容一样,且无法设置宽高。...---- 文字在超出长度时,如何实现用省略号代替 ? 超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮的形式显示出全部信息 ?...响应式网站设计( Responsive Web design ) 是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。...视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢 来创建出令人惊叹的 3D 效果。 CSS3 实现。...优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器 jQuery 实现通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。优点:能兼容到各个版本的,效果可控性好。

    2K20

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券