美文网首页
子div超出父div部分横向滚动,不换行

子div超出父div部分横向滚动,不换行

作者: 五长同学 | 来源:发表于2018-06-27 11:26 被阅读0次

父div:

.rootBar{

width: 1920px;

height: 216px;

float: left;

overflow-y: hidden;

overflow-x: auto;

white-space: nowrap;

}

子div:

.childrenBar{

width: 384px;

height: 216px;

position: relative;

display: inline-block;

}

display的值及解释:

block: 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行

none: 隐藏对象。与   visibility   属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline: 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行

inline-block: 将对象呈递为内联对象,但是对象的内容作为块对象,旁边的内联对象会被呈递在同一行内

compact: 分配对象为块对象或基于内容之上的内联对象

marker: 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before伪元素一起使用

inline-table: 将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

table-caption: 将对象作为表格标题显示

table-cell: 将对象作为表格单元格显示

table-column: 将对象作为表格列显示

table-column-group: 将对象作为表格列组显示

table-header-group: 将对象作为表格标题组显示

table-footer-group: 将对象作为表格脚注组显示

相关文章

  • 子div超出父div部分横向滚动,不换行

    父div: .rootBar{ width: 1920px; height: 216px; float: left...

  • h5笔记

    div中嵌套div,如果子div显示范围超出父div,子div超出部分仍然正常显示,父div也保持其设置的宽高 n...

  • css3实现水球波纹效果

    原理:父div设为圆形,并隐藏超出范围的内容,多个子div设为大圆角正方形并设置背景颜色, 子div圆心设置到父d...

  • css div 内容一行显示

    div 内容超出后仍然一行显示, 自动显示横向滚动条 注意 在 Vue 项目中, 数据动态绑定后, 如果超出内容宽...

  • 前端笔记

    容易忘记的部分 从左到右不换行,超出才换行flex-box m-flex-box-wrap div旋转45度 隐藏...

  • div居中

    设置子元素div 和 父级div 宽高一样使得子元素div在父级的div里面居中

  • div 超出不换行

    1.问题描述 div默认是换行的,当文本全部为数字时,会被当做一个字符处理,从而导致溢出问题,将这个字符截断即可。...

  • position:absolute相对于谁定位及溢出隐藏问题

    1、绝对定位元素溢出父元素如何隐藏 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hid...

  • 隐藏滚动条

    条件:一个div,高度超出预设高度,会出现滚动条,不美观。 解决:在div外在套一个div,外层div设置over...

  • 在父div中居右显示

    子div要在父div中居右显示,父div要设置属性text-align:right,

网友评论

      本文标题:子div超出父div部分横向滚动,不换行

      本文链接:https://www.haomeiwen.com/subject/uvvmcftx.html