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

在父div内添加垂直子div(都是固定宽度的),并在父级使用动态水平滚动条

在父div内添加垂直子div(都是固定宽度的),并在父级使用动态水平滚动条可以通过以下方式实现:

  1. 首先,在父div中设置一个固定高度的容器,并将其样式设置为overflow-x: scroll; white-space: nowrap;,这样就会在容器中创建一个水平滚动条,并且子div元素不会换行。

示例代码如下:

代码语言:txt
复制
<style>
.parent-div {
  width: 100%; /* 设置父div的宽度 */
  height: 200px; /* 设置父div的高度 */
  overflow-x: scroll; /* 显示水平滚动条 */
  white-space: nowrap; /* 子元素不换行 */
}

.child-div {
  display: inline-block;
  width: 200px; /* 设置子div的固定宽度 */
  height: 100%; /* 子div高度与父div相同 */
  background-color: #f0f0f0;
  margin-right: 10px; /* 设置子div之间的间距 */
}
</style>

<div class="parent-div">
  <div class="child-div">子div1</div>
  <div class="child-div">子div2</div>
  <div class="child-div">子div3</div>
  <!-- 添加更多子div -->
</div>

在上述代码中,父div的高度设定为200px,子div的宽度设置为200px,并通过display: inline-block;使其水平排列。同时,设置了margin-right: 10px;来为子div之间添加间距。

这样,当子div的总宽度超过父div的宽度时,父div就会显示一个水平滚动条,用户可以通过滚动条来查看不可见的子div元素。

  1. 推荐的腾讯云相关产品:
  • 云服务器(CVM):提供可扩展的计算资源,适用于搭建各类应用、网站和服务。
  • 云数据库MySQL版(CDB):支持高可用、可扩展的MySQL数据库服务。
  • 云存储(COS):提供高可用、高可靠、强一致性的对象存储服务,适用于存储和管理各类非结构化数据。
  • 腾讯云函数(SCF):无服务器计算服务,可以根据事件自动触发执行函数代码。
  • 腾讯云容器服务(TKE):支持容器化应用的部署和管理,提供高可用性、弹性扩展的容器集群。
  • 腾讯云弹性MapReduce(EMR):用于大数据处理和分析的托管集群服务。

请注意,以上腾讯云产品仅作为示例,实际选择应根据具体需求进行。详细的产品介绍和更多腾讯云产品,请访问腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

滚动条滚动没有任何关系 ; 固定定位元素 始终显示浏览器可视窗口固定位置 , 不会改变 ; 注意相对是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 ...容器需要居中对齐 ; 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单方法就是 使用标尺测量容器宽高 , 通过设置四个边边偏移量 , 设置元素 水平 / 垂直 居中 ; 2、...先偏移50%再回退固定容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移方式设置居中就会出现问题 ; 先设置 50% 宽度 / 高度 偏移量 , 然后再往回退 盒子一半 宽度 / 高度...; 14、使用绝对定位 / 浮动解决外边距塌陷问题 标准流盒子 中 , 添加一个 标准流盒子 ; 如果 盒子设置 100 像素外边距 , 盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例...清除浮动 - 元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客 ;

14310

前端知识点总结(html+css)(上)

(如div下可包含div) 行内元素(常见行内元素a,span.img) 一行显示多个 宽度为内容宽度 不可以设置高度和宽度 标签一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块元素和行内元素特征...高度塌陷 原因 很多情况盒子不方便给高度,盒子浮动脱离文档流不占位置,使盒子高度为0 解决方案 浮动元素末尾加一个空标签,设clear:both 添加overflow:hidden 使用...13. div水平垂直居中几种方式。...px和em区别是什么 px和em都是长度单位,两者区别是:px值是固定,指定为多少就是多少,计算比较容易;em值不是固定,是相对于容器字体大小,并且em会继承元素字体大小。...不定高::flex,:margin:auto,0 不定高::flex,align-items: center 水平垂直居中 元素为块元素::flex,:margin:auto

28610

【网页前端】CSS常用布局之定位

不受元素约束 6.3 总结 1 、 固定定位和绝对定位都是脱离了标准流,不会影响标准流布局(也不影响浮动) 2 、 固定定位元素,哪怕拖动滚动条,元素位置也保持页面不变。...、 仅定位元素才可以设置 z-index ,标准流和浮动设置无效 8.2 定位子元素-水平垂直居中 8.2.1 引言&概念 有时我们存在需要让元素元素中 水平居中需求,若使用标准流或浮动...- 设置: 绝对 定位,元素 水平垂直居中(如果是 body ,相当于页面水平垂直居 中) 元素 - 设置: 固定 定位,元素 页面 水平垂直居中 适用于:快速设置元素水平垂直居中效果.../2-边框) px ; margin-left:-(高度/2-边框) px ; } 注意: 元素 - 设置: 绝对 定位,元素 水平垂直居中(如果是 body...,相当于页面水平垂直居中)  元素 - 设置: 固定 定位,元素 页面 水平垂直居中 适用于:手动自定义设置元素水平垂直居中效果。

1.2K40

详解DOM对象中clientWidth、offsetWidth等属性

同理,clientHeight=height+顶部padding+底部padding-水平滚动条宽度。...offsetWidth与offsetHeight有个特点,就是这两个属性值只与该元素有关,与周围元素(元素无关)。...2、如果当前元素元素中有CSS定位(position为absolute或relative),offsetParent取最近那个元素。...我们为上面代码div#content添加一个元素div#sub1 并添加样式(说明以下,div#sub-content高度被我改成了50px) 演示图如下 可以知道,div#sub-content...当不存在水平垂直滚动条时,scrollWidth和scrollHeight等于clientWidth和clientHeight, 当存在水平垂直滚动条时,请看下面演示(将div#sub-contetn

2.2K20

建议收藏!总结了42种前端常用布局方案

: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定,就是一个,其宽度继承了 宽度,还有一个,这里是固定300px...定宽块元素水平居中(方法三) 当元素开启决定定位或者固定定位时, left 属性和 right 属性一起设置就会拉伸元素宽度配合 width 属性与 margin 属性就可以实现水平居中。...,就是一个包裹一个,这里固定300px*300px,代码如下: 最终实现效果如下...行内块元素垂直居中 若元素是行内块元素, 基本思想是元素使用display: inline-block, vertical-align: middle;并让元素行高等同于高度。...,就是一个包裹一个,这里固定300px*300px,代码如下: 最终实现效果如下

4.1K30

建议收藏!总结了 42 种前端常用布局方案

: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定,就是一个,其宽度继承了 宽度,还有一个,这里是固定300px...定宽块元素水平居中(方法三) 当元素开启决定定位或者固定定位时, left 属性和 right 属性一起设置就会拉伸元素宽度配合 width 属性与 margin 属性就可以实现水平居中。...,就是一个包裹一个,这里固定300px*300px,代码如下: 最终实现效果如下...行内块元素垂直居中 若元素是行内块元素, 基本思想是元素使用display: inline-block, vertical-align: middle;并让元素行高等同于高度。...,就是一个包裹一个,这里固定300px*300px,代码如下: 最终实现效果如下

4.1K30

二、CSS

块元素 块元素,也可以称为行元素,布局中常用标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中行为: 支持全部样式 如果没有设置宽度,默认宽度宽度100%...上下、padding上下) 宽高由内容决定 盒子并在一行 代码换行,盒子之间会产生间距 元素是内联元素,元素可以用text-align属性设置元素水平对齐方式,用line-height属性值设置垂直对齐方式...它们布局中表现行为: 支持全部样式 如果没有设置宽高,宽高由内容决定 盒子并在一行 代码换行,盒子会产生间距 元素是内联块元素,元素可以用text-align属性设置元素水平对齐方式,用line-height...,超出宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素 5、浮动元素后面没有浮动元素会占据浮动元素位置,没有浮动元素文字会避开浮动元素,形成文字饶图效果 6、元素整体浮动元素无法撑开元素...,需要清除浮动 7、浮动元素之间没有垂直margin合并 清除浮动 上增加属性overflow:hidden 最后一个元素后面加一个空div,给它样式属性 clear:both(不推荐)

1.8K70

动手练一练,手写一个价格对比、固定表头滚动表格

今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示如视频所示,当滚动条滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...二、案例相关知识点复习 这篇案例我们是通过JS代码,判断滚动条位置,动态添加和移除表头固定样式(fix属性),这里就需要运用几个和位置相关 DOM API 才能顺利完成本案例,相关 API 介绍如下所示...scrollHeight: 因为元素比元素高,元素不想被子元素撑一样高就显示出了滚动条滚动过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分元素高度。...2、表格内容结构 我们将第二部分表格放置 container 容器,方便我们做响应式相关设置,表格基础结构内容如下: <div class...小节 到此,我们一起完成了这个案例,通过本案例,我们学会了如何使用原生方式动态实现固定元素,并在一定时机取消固定

3.2K31

HTML & CSS页面布局之定位

我们之前把元素分为块元素,行内元素,行内块元素,他们特性是块独占一行,行内和行内块可以一行共存,这些特性都是针对标准流。总结一下就是,标准流中元素只能在水平垂直方向上排版。...如果元素是块元素, 那么就会垂直排版,如果元素是行内元素/行内块元素, 那么就会水平排版。 2,浮动流 浮动流只有一种排版方式, 就是水平排版。它只能设置某个元素元素左对齐或者右对齐。...,二元素不受影响*/ 3,固定定位 元素固定定位和背景图片关联性相似,可以控制元素是否随着滚动条滚动。...居中与flex 1,水平居中 如果元素是文本、图片等行内元素,元素中设置text-align:center即可实现行内元素水平居中,如果子元素是不定宽块元素,将元素display设置为inline-block...,使元素变成行内元素,可以实现块元素水平居中。

5.4K10

一文带你响应式网页设计入门

我们设置main标签设置为flex-wrap: wrap,这个设置为允许其内部节点在节点中换行, flex-basis: 100% 是指我们div节点宽度是相对于节点宽度100%(图1)。...,我们设置其宽度宽度33%(图2)。...( 图2) Flexbox提供了一种很好方式来实现多样化、流畅布局。某些情况下,我们垂直空间可能没有这样自由。我们可能需要把一个元素放在固定高度。...在这种情况下,我们可以使用另一种技术-水平滚动。 使用内容溢出滚动条进行水平滚动 可能会有这样一种情况:您内容会溢出界面,而没有一种优雅处理方式去解决。...最后,宽度和高度为100%会使iframe元素成为其父100%。.videoWrapper完全控制建立此宽高比布局。

4.8K20

CSS布局(二) 盒子模型属性

对于块元素来说,宽度设置为auto,则会尽可能宽。详细来说,元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距;   高度设置为auto,则会尽可能窄。...百分比值都是相对于包含块宽度决定,常常用于移动端头图  外边距margin 设置外边距margin会在元素外创建额外空白,空白通常指不能放其他元素区域,而且在这个区域中可以看到元素背景...: 1em; background-color: lightblue; } ...【为什么margin:auto无法实现垂直居中】   水平方向可以居中是因为块元素宽度默认是撑满元素,如果给宽度设置一个固定值,而左右margin设置为auto,则可以平分剩余空间   垂直方向不可以居中是因为块元素高度默认是内容高度...,与元素高度并没有直接关系,而上下margin设置为auto,则被重置为0 margin: 0 auto; 【为什么图片使用margin:auto不能水平居中】   图片无法水平居中,类似于块元素无法垂直居中

1.9K70

css必知几个底层知识和技巧

2.2.元素宽度设为100%时奇怪现象原理探究 元素宽度 = 图片宽度 + 文字内容宽度 浏览器渲染原理:先下载文档内容,加载头部样式资源,然后按从上到下、自外而顺序渲染dom内容。...本例现象产生原因就是:当渲染到元素时,元素width:100%并没有渲染,宽度就是图片加文字内容宽度;等渲染到文字这个子元素时候,元素宽度已经固定,此时width:100%就是以固定元素宽度...overflow:auto,则内联元素垂直padding可能会使元素出现滚动条,否则如果元素不设置设置overflow,只会在垂直方向上发生重叠,不会影响布局: /* 元素设置 */ .pd-...,而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件 块元素,但不包含浮动和绝对定位元素 默认文档流下只出现在垂直方向 margin合并三种场景...相邻兄弟元素 和第一个/最后一个元素 * 解决方案: 设置为块级格式化上下文元素 元素设置border-top/bottom值 元素设置padding-top/bottom值 元素设置高度

2.1K20

CSS-03

# 外边距实现盒子居中 可以让一个盒子实现水平居中,需要满足一下两个条件: 必须是块元素。 盒子必须指定了宽度(width) 然后就给左右外边距都设置为auto,就可使块元素水平居中。...内边距,ie6等低版本浏览器也会有问题。 我们尽量不要给行内元素指定上下内外边距就好了。 # 外边距合并 使用margin定义块元素垂直外边距时,可能会出现外边距合并。...# 嵌套块元素垂直外边距合并 对于两个嵌套关系块元素,如果元素没有上内边距及边框,则元素上外边距会与元素上外边距发生合并,合并后外边距为两者中较大者,即使元素上外边距为0,也会发生合并...# 盒子阴影 语法格式: box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 /外阴影; 值 说明 h-shadow 必需水平阴影位置。...visible(默认) :  不剪切内容也不添加滚动条

2K30

CSS入门?一篇就够了!

行内元素特点: (1)和相邻行内元素一行上。 (2)高、宽无效,但水平方向padding和margin可以设置,垂直方向无效。 (3)默认宽度就是它本身内容宽度。...行内元素特点: (1)和相邻行内元素一行上。 (2)高、宽无效,但水平方向padding和margin可以设置,垂直方向无效。 (3)默认宽度就是它本身内容宽度。...由2可以推断出,一个盒子里面的盒子,如果其中一个有浮动,则其他 都需要浮动。这样才能一行对齐显示。 元素添加浮动后,元素会具有行内块元素特性。...相 这个“相”太重要了,是我们学习定位口诀,时时刻刻记住。 这句话意思是 是绝对定位的话, 要用相对定位。...就是说, 是绝对定位,父亲只要是定位即可(不管父亲是绝对定位还是相对定位,甚至是固定定位都可以),就是说, 绝,都是正确

5.2K20

如何把控css方向感

2.2.元素宽度设为100%时奇怪现象原理探究 元素宽度 = 图片宽度 + 文字内容宽度 浏览器渲染原理:先下载文档内容,加载头部样式资源,然后按从上到下、自外而顺序渲染dom内容。...本例现象产生原因就是:当渲染到元素时,元素width:100%并没有渲染,宽度就是图片加文字内容宽度;等渲染到文字这个子元素时候,元素宽度已经固定,此时width:100%就是以固定元素宽度...overflow:auto,则内联元素垂直padding可能会使元素出现滚动条,否则如果元素不设置设置overflow,只会在垂直方向上发生重叠,不会影响布局: ?...其本质区别在于:chrome是元素超过元素content box尺寸触发滚动条显示,而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件 块元素,...但不包含浮动和绝对定位元素 默认文档流下只出现在垂直方向 margin合并三种场景 相邻兄弟元素 和第一个/最后一个元素 * 解决方案: 设置为块级格式化上下文元素

1.2K10

CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局与BFC

当出现滚动条时,对象不会随着滚动。 ---- center 与absolute一致,但偏移定位是以定位祖先元素中心点为参考。盒子在其包含容器垂直水平居中。...使用table标签(或直接将块元素设值为display:table),再通过给该标签添加左右margin为auto。 inline-block实现水平居中方法。...flex布局使用 justify-content:center 复制代码 垂直居中 通过设置容器相对定位,设置绝对定位,标签通过margin实现自适应居中 弹性布局flex:设置...display: flex; 设置margin为auto实现自适应居中 设置相对定位,设置绝对定位,并且通过位移transform实现 table布局,通过转换成表格形式,然后设置...问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度50%。同时div中有一个文字A,文字需要水平垂直居中。

2K30

CSS第五天-定位

CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 元素搭配子绝使用 根据自身原来位置,进行定位 没有脱标,页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)祖先元素来定位 相 脱离标准流,页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动条滚动而滚动 可以直接加宽高,默认宽度是内容宽度 脱离标准流,页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...: 文字、行内元素、行内块元素 === 给其父元素添加text-align: center 块元素 === 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流元素设置...并列关系垂直居中对齐 设置vertical-align: middle ---- 垂直用法: 文本框和表单按钮无法对齐 input和img无法对齐 div文本框,文本框无法贴顶问题 div不设高度由

2.7K40

第141天:前端开发中浏览器兼容性问题总结(二)

; 3、设置图片垂直对齐方式 vertical-align:top/middle/bottom 4、改变对象属性,如果对象宽、高固定,图片大小随对象而定,那么可以对元素设置: overflow...IE6 width为奇数,右边多出1px问题 问题: 元素采用相对定位,且宽度设置为奇数时,元素采用绝对定位,ie6中会出现右侧多出1像素 解决: 将宽度奇数值改成偶数 12....IE6 元素绝对定位问题 问题:        元素使用padding后,元素使用绝对定位,不能精确定位 解决:        元素中设置  _left:-20px; _top:-1px;...容器浮动后,容器扩展问题 问题: 容器都float以后,容器没有设定高度,容器将不会扩展 解决: 只需要添加一个clear:bothdiv,代码如下: <div style="border:...容器宽度大于容器宽度时,内容超出 问题: DIV宽度DIV宽度都已经定义,IE6中如果其DIV宽度大于DIV宽度DIV宽度将会被扩展,在其他浏览器中DIV宽度将不会扩展

1.9K21

CSS-定位(position)

元素定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 没有定位 有定位 相 定位扩展 绝对定位盒子水平/垂直居中 固定定位...# 有定位 绝对定位是将元素依据最近已经定位(绝对、固定或相对定位)元素(祖先)进行定位。 # 相 这个“相”太重要了,是我们学习定位口诀。...相就是指元素设置绝对定位,而元素设置相对定位。 换句话说:如果要对一个元素使用定位的话,让元素(绝对定位)以其父元素(相对定位)为标准来定位。...定位盒子也可以水平或者垂直居中,有一个算法。 首先left 50%,top50%盒子一半大小。 然后外边距退回自己宽度及高度一半值就可以了 。...不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化,该元素都会始终显示浏览器窗口固定位置。 固定定位有两点: 固定定位元素跟父亲没有任何关系,只认浏览器。

1.5K10
领券