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

以一种适用于IE/Edge的方式将div按百分比划分为行?

要将div按百分比划分为行,可以使用CSS的flexbox布局来实现。具体步骤如下:

  1. 首先,在HTML文件中创建一个包含多个div的容器,例如:<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
  2. 在CSS文件中,为容器设置display属性为flex,使其成为一个flex容器:.container { display: flex; }
  3. 设置每个子元素的宽度百分比,以实现按百分比划分为行的效果。可以使用flex-basis属性来设置子元素的宽度,例如:.item { flex-basis: 33.33%; /* 三个子元素平均分为三行 */ }
  4. 如果需要在IE/Edge浏览器中兼容flexbox布局,可以使用-ms前缀来添加相应的CSS属性,例如:.container { display: -ms-flexbox; -ms-flex-direction: row; } .item { -ms-flex: 1 0 33.33%; }

这样,div就会按照百分比划分为行,并且在IE/Edge浏览器中也能正常显示。

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

相关·内容

前端基础:HTML

-- 注释不会在浏览器中显示 --> 标签 br 标签就是一个换行功能标签 标签 在 p 标签中内容会在开始与结束之间产生一个空白并且它会自动换行 常用属性 align 作用是设置段落中内容对齐方式...关于 HTML 中标签属性 两种方式: 直接设置值,默认单位是 px (像素) 可以设置百分比 标签 Div 是一个块标签...Div 与 CSS 结合,会更好对页面进行排版 标签 Span 标签也是一个块标签Div 与 span 区别:Div 会自动换行,我们也叫这样标签为级元素Span 标签它不会自动换行...这种表达方式,理论上我们可以得到 256 * 256 *256=16777216 种颜色。 使用十六进制方式,取值范围 #000000 ~ #FFFFFF (黑色到白色)。...-- rows 定义了三:第一 100 像素,第三:100 像素;第二:剩下像素 --> <frame

1.8K20

HTML

这是块内容 这是块内容 这是块内容 注意点: 是块级元素,独占一 # span标签 单词缩写:span 跨度,跨距...-- div标签独占一 上下排列 --没有语义 --> div标签 div标签 div标签 运行结果 # 排版标签总结 # 文本格式化标签(熟记) 在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中文本格式化标签,使文字特殊方式显示...alt:该属性指定一段文本,用来作为该图片提示信息。 height:指定图片高度,属性值可以是百分比,也可以是像素值。 width:指定图片宽度,属性值可以是百分比,也可以是像素值。...-- © :版权 --> ©版权问题 运行结果 # 注释标签 在HTML中还有一种特殊标签

3.7K10
  • Flex布局

    任何容器都可以指定为 Flex 布局(包括行内元素) 设为 Flex 布局后,子元素 float、clear 和 vertical-align 属性失效,Flex 布局可以实现垂直居中 采用 Flex...,主轴为垂直方向时,则换宽度 5. baseline:项目的第一文字基线对齐 align-content 属性 align-content 属性定义侧轴上子元素排列方式(多行) 只能用于项目出现换行情况...flex-flow: row nowrap; 项目的属性 flex 属性 flex 属性定义子项目分配剩余空间,用 flex 来表示占多少份数,可以是百分比形式,其中百分比是相对与容器(即父级)来说。...> 2 3 4 结果: 分析: 子项目都没有宽度,最后...flex 占比分配剩余空间,如第一个紫色项目占剩余空间 1/(1 + 2 + 1 + 2) = 1 /6 align-self 属性 align-self 属性控制子项自己在侧轴上排列方式,允许单个项目有与其他项目不一样排列方式

    1.1K20

    CSS-02

    标签什么方式进行显示,比如div 自己占一, 比如span 一可以放很多个 作用: 我们网页标签非常多,再不同地方会用到不同类型标签,以便更好完成我们网页。...标签类型(分类) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。...常见块元素有~、、、、、等,其中标签是最典型块元素。 块级元素特点: (1)总是从新开始。...,测量后测量值值设置 */ /* 如果只设置一个值 */ /* 颜色,图片,背景重复方式,位置 */ background:...其参数设置如下: a) 可以设置长度单位(px)(img大小一样)或百分比(设置百分比时,参照盒子宽高) b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏

    2K30

    CSS-浮动(float)

    定位 盒子定在浏览器某一个位置——CSS 离不开定位,特别是后面的 js 特效。 总结:html当中有一个相当重要概念,标准流或者普通流。...普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序意思,比如块级元素会独占一,行内元素会顺序依次前后排列;按照这种大前提布局排列之下绝对不会出现例外情况叫做普通流布局。...(清除右侧浮动影响) both 同时清除左右两侧浮动影响 # 使用after伪元素清除浮动 :after 方式为空元素升级版,好处是不用单独加标签了 使用方法: .clearfix:after...使用对象实际尺寸 number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性 normal 值 使用说明 设置或检索对象缩放比例。...设置或更改一个已被呈递对象此属性值导致环绕对象内容重新流动。 <!

    2.1K20

    移动web开发(3)之flex弹性布局

    当我们为父盒子设为flex布局以后,子元素float/clear/vertical-align属性失效. 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局....注意: 默认主轴是x轴,,row,那么剩下侧轴就必然是y轴啦 我们元素是根据主轴排列 根据我们以往经验,当几个盒子浮动排列在一时,盒子一挤不下时候会掉下去,但是flex布局就不一样了...做出来效果: 但是也有主侧轴问题,假如我设置主轴是y轴,再让侧轴居中,出来效果就是: 但是这个属性只适用于单行文本....align-items和align-content区别 align-items适用于单行情况下,只有上对齐,下对齐,居中和拉伸. align-content适用于换行(多行)情况下(单行时无效),可以设置上对齐...比如一个盒子让三个小盒子平分,以往我们就要使用百分比33.33%,非常麻烦,现在就只要一代码即可.

    91111

    css属性及定位操作

    常用场景:去除超链接自带下划线 a { text-decoration: none; } 首缩进 段落第一缩进 32像素: p { text-indent: 32px; } 背景属性...,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,上-右-下-左顺序作用于四边; 浮动(float)属性 在 CSS 中,任何元素都可以浮动。...重点:如果父级设置了position属性,例如position:relative;,那么子元素就会父级左上角为原始点进行定位。...用百分比宽度表示。...-- 顶部导航栏 结束 --> View Code 后台管理布局 整个页面分为特定几个区域分别进行编辑 常用布局方式之一 重要 <!

    2.4K50

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

    它就像是relative和fixed合体,当在屏幕中时常规流排版,当卷动到屏幕外时则表现如fixed。该属性表现是现实中你见到吸附效果。...style> #flex-container { display: flex; /* 采用 flex 布局 */ flex-direction: row; /* 排列...父元素相对定位,那绝对定位下子元素宽高若设为百分比,是相对谁而言?...相对于父元素(content + padding)值, 注意不含border 延伸:如果子元素不是绝对定位,那宽高设为百分比是相对于父元素宽高,标准盒模型下是content, IE盒模型是content...: .container { border: 10px solid red; overflow: hidden; } 复制代码 同时这也是清除浮动一种方式

    2K31

    【前端就业课 第二阶段】CSS 零基础到实战(02)标签类型、字体与图片

    一、块元素、行内元素、行内块元素 在学习CSS时,我们需要搞清楚HTML 标签一些分类,HTML 一般可分为块元素、行内元素以及行内块元素,不同种类在呈现上有着不同表现形式。...,下面是一个示例: 以上代码通过设置宽度和背景色改变了其 div 一些属性,但是我们还是可以发现,这个div 即使 更改了其宽度,也是独占一。...1.2 行内元素 我们可以理解行内元素即为同一内可以显示元素,当然这一个“同一意思指的是宽度未大于最大行宽时则在同一中进行显示,并且该元素宽度等于其内容宽度。...,我们可以通过显示模式转换使得一种类型元素拥有其他类型元素显示形式。...10%;接下来是 opacity,该属性为图片透明度,取值为0-1,值越大越不透明,最后一个是 border-radius,该属性表示设置图片圆角,可以使用百分比也可以使用像素值,值越大图片圆角越圆

    1.1K10

    移动开发-响应式

    ,再改变里面子元素排列方式和大小,从而实现不同屏幕下,看到不同页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介: Bootstrap 来自Twitter,是目前最受欢迎前端框架...--要求当前网页使用IE浏览器最高版本内核来渲染--> <!...占据全部视口 (viewport) 容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统,是指页面布局划分为等宽列,然后通过列数定义来模块化页面布局 Bootstrap...-6 列嵌套: 内置栅格系统内容再次嵌套,就是一个列内再分若干份小列,可以通过添加一个新.row元素和一系列 .col-sm 元素到已经存在 .col-sm 元素内 列偏移: 使用 .col-md-offset 类可以列向右侧偏移,这些类实际是通过使用 * 选择器为当前元素增加了左侧边距 (margin) <div class="row

    2.4K20

    JavaScript进阶内容——DOM详解

    上方获取方法同样适用于id选择,注意需要用‘’包括 var nav = document.querySelector('#nav'); //4.同样使用于标签选择...页面中每个元素都可以产生某些触发JavaScript事件,简单来说就是产生:触发——响应机制 事件三要素 我们把事件分为三部分: 事件源 事件被触发对象 事件类型 如何触发,例如点击onclick...:data-开头,后面加上其他内容 然后我们讲一下获得属性值方法: //获得属性值(只能获得内置属性,即自身携带属性) element.属性; //获得属性值(可以获得所有属性,包括自定义属性) element.getAttribute...,就需要用到循环排他思想: 所有元素全部清除样式 给当前元素设置样式 我们给出一个案例来解释排他思想: <!...事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流 DOM事件流分为3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 事件冒泡:IE最早提出,事件开始时由具体元素接收,然后逐级向上传播到

    1.5K20

    前端响应式布局为什么是个坑?

    二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区视图符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,网页宽度设为设备宽度...多种屏幕设备宽度主要分为四个区间。...写媒体查询时候要按照屏幕从小到大设置。 外层包裹元素宽度处理要使用百分比。 图片缩放处理时候容易失真,所以尝试给图片添加最大最小宽度。...三、响应式布局实例 eg:制作一个展示图片列表,大屏展示一4张图片,ipad一展示3张图片,手机一展示两张图片。 <!...仅适用布局、信息、框架并不复杂部门类型网站。 响应式对于 低版本IE浏览器简直是悲剧。响应式里运用了很多html5新特性,而这些特性只要高级浏览器才支持,所以在IE6、7、8几乎是看不了

    97040

    移动端WEB开发之响应式布局

    原理就是在不同屏幕下,通过媒体查询来改变这个布局容器大小,再改变里面子元素排列方式和大小,从而实现不同屏幕下,看到不同页面布局和样式变化。...--要求当前网页使用IE浏览器最高版本内核来渲染-->     <!...适合单独做移动端开发 2.6 bootstrap栅格系统 栅格系统英文为"grid systems" ,也有人翻译为“网格系统”,它是指页面布局划分为等宽列,然后通过列数定义来模块化页面布局。...Bootstrap提供了一套响应式、移动设备优先流式栅格系统,随着屏幕或视口(viewport)尺寸增加,系统会自动分为最多12列。...小列   ​ 列偏移 使用 .col-md-offset-* 类可以列向右侧偏移。

    4K20

    4-Bootstrap前端框架

    响应式布局-栅格系统 同一套页面可以兼容不同分辨率设备,Bootstrap响应式布局依赖于栅格系统实现,分为12各格子,通过指定控件在不同分辨率设备上所占各自数目实现兼容...步骤 定义容器(类似于table概念) 容器分为:1. container (固定宽度,两边有留白)2. container-fluid (100% 宽度) 定义行(类似于table中tr)样式:...栅格类适用于与屏幕宽度大于或等于分界点大小设备 , 并且针对小屏幕设备覆盖栅格类。...则在小屏幕手机上占四个栅格,同时在大屏幕设备上也能保证占据四个格子) 栅格类属性不可以向下兼容,如果真实设备分辨率小于预设值则一个元素会占满整行(例如,设定col-lg-4则设备在大屏幕上一个元素占四个栅格,但在小于临界值所有设备上都单独占据一...还有诸多其他预设类型详见此页 图片样式:class=”img-responsive”,响应式图片布局,图片会随着设备分辨率变化自动调整大小适应当前设备。

    1.4K20

    前端响应式布局为什么是个坑?

    二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区视图符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,网页宽度设为设备宽度...多种屏幕设备宽度主要分为四个区间。...写媒体查询时候要按照屏幕从小到大设置。 外层包裹元素宽度处理要使用百分比。 图片缩放处理时候容易失真,所以尝试给图片添加最大最小宽度。...三、响应式布局实例 eg:制作一个展示图片列表,大屏展示一4张图片,ipad一展示3张图片,手机一展示两张图片。 <!...仅适用布局、信息、框架并不复杂部门类型网站。 响应式对于 低版本IE浏览器简直是悲剧。响应式里运用了很多html5新特性,而这些特性只要高级浏览器才支持,所以在IE6、7、8几乎是看不了

    1.8K10

    前端响应式布局为什么是个坑?

    二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区视图符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,网页宽度设为设备宽度...多种屏幕设备宽度主要分为四个区间。...写媒体查询时候要按照屏幕从小到大设置。 外层包裹元素宽度处理要使用百分比。 图片缩放处理时候容易失真,所以尝试给图片添加最大最小宽度。...三、响应式布局实例 eg:制作一个展示图片列表,大屏展示一4张图片,ipad一展示3张图片,手机一展示两张图片。 <!...仅适用布局、信息、框架并不复杂部门类型网站。 响应式对于 低版本IE浏览器简直是悲剧。响应式里运用了很多html5新特性,而这些特性只要高级浏览器才支持,所以在IE6、7、8几乎是看不了

    92520
    领券