33.33%宽度的3个Div在移动端变为100%宽度_在100%宽度下创建赋形div的问题_在我将宽度设置为100%以上后，Div水平向右移动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

关于Div的宽度与高度的100%设定

正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？...其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是...div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。...举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级...同时，让人高兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。

3.5K2 0

关于移动端百分比宽度的几种实现

本文作者：IMWeb 结一原文出处：IMWeb社区未经同意，禁止转载由于移动端的设备宽度各不相同，而且因为竖屏宽度都比较小，所以一般都采用满屏的方式布局，而不像PC端的使用固定宽度居中的技术布局...full-list .item:nth-child(2n){ background: #ccc; } .full-list .item:hover{ background: #f00; } demo效果见：移动端百分比宽度的几种实现...从这新单位的出现，也知道为了移动端的百分比我们的W3C组织也是操碎了心。为了上面所说的四等分，那每个的宽度应该为25vw，而我们ul的list--xxx就是list--vw。...代码为： .parent{ display: table; table-layout: fixed; width: 100%; } .parent > .child{ display...而其余的flex，%或是table都不是最简单省事的，在单纯的宽度处理方面还能胜任，但如果涉及到高度随宽度同时变化，即宽高遵守某个比例（如图片或视频的变化），就需要借用padding技术撑开了。

8611 0

您找到你想要的搜索结果了吗？

是的

没有找到

关于移动端百分比宽度的几种实现

由于移动端的设备宽度各不相同，而且因为竖屏宽度都比较小，所以一般都采用满屏的方式布局，而不像PC端的使用固定宽度居中的技术布局。...full-list .item:nth-child(2n){ background: #ccc; } .full-list .item:hover{ background: #f00; } demo效果见：移动端百分比宽度的几种实现...从这新单位的出现，也知道为了移动端的百分比我们的W3C组织也是操碎了心。为了上面所说的四等分，那每个的宽度应该为25vw，而我们ul的list--xxx就是list--vw。...代码为： .parent{ display: table; table-layout: fixed; width: 100%; } .parent > .child{ display...而其余的flex，%或是table都不是最简单省事的，在单纯的宽度处理方面还能胜任，但如果涉及到高度随宽度同时变化，即宽高遵守某个比例（如图片或视频的变化），就需要借用padding技术撑开了。

9129 0

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...需要的效果,如下图: 需求分析看图,其实很简单.如果宽度是固定的,那么这个布局就不要太简单了. 问题是,设备的宽度是不固定的哦,那么问题就是,在不知道具体宽度的时候,如何来设定它对应的高度呢?...也就是说,如何在CSS中,找到一个高度和宽度挂钩的属性.只要存在这个参数,那么,问题就能解决. 那么有没有这个参数呢?...class="box1"> CSS代码...在我们遇到一些问题的时候,尤其是布局这种问题,我们要考虑的是,能不能用CSS解决,而不时一位的去考虑JS.毕竟,JS是用来交互的,而CSS是用来布局的.

1.3K1 0

栅格化系统的原理以及实现

页面上将会展示一个带有灰色边框的，宽度 100% 的矩形。如果手动控制浏览器放大缩小，此 DIV 也会相应的放大缩小，但宽度始终是 100%。...页面上将会有两个宽度各占 50% 的 DIV，如果页面放大或缩小，这两个 DIV 都会始终保持着页面 50% 的宽度。...实现让我们来亲自实现一个栅格化系统，假设我们要将一行划分为 12 等分，那 1 等分就占有 100% / 12 = 8.33% 的宽度。...其实，它们都是栅格化系统的 CSS 类名，只是针对了不同的屏幕宽度。假如我们有这样的一个需求：在 PC 上，因为屏幕比较大，我们要求一行显示 4 列的内容。...但是在手机上，因为屏幕比较小，要求一行显示 3 列的内容。即一个网站同时适配 PC 和手机端，根据不同的端自动调整页面。

1.5K4 0

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

, 放置在单独的标签中 , 每个标签中放置一个链接标签 , 在链接标签中包裹一个图片 ; <!..., 如果子元素横向累加宽度超过当前宽度 , 会自动换行 , 因此这里为每个子元素设置一个 1/3 宽度 , 即 33.33% ; 子元素设置浮动和宽度的样式如下 : .brand div...个为其设置 1/3 的宽度即可 */ width: 33.33%; } 5、设置图片宽度自适应上述布局中 , 图片自动充满父容器 , 为标签设置 100% 宽度 , 设置图片后..., 会按照宽高比等比例缩放 ; 设置样式为 : .brand div img { /* 设置图片链接中的图片在水平方向上充满父容器即可 */ width: 100%; } 二、完整代码实例...1/3 的宽度即可 */ width: 33.33%; } .brand div img { /* 设置图片链接中的图片在水平方向上充满父容器即可 */ width: 100%

3.5K2 0

【CSS】最强大的布局之grid布局精讲

: 100px 100px 100px; /* 设置行数同时设置了行的宽度如果没有设置行数将会自动根据元素数量自动设置*/...100px的大小填满宽度*/ grid-template-columns: repeat(auto-fill, 100px); /* fr 是一个相对单位大家可以理解为所占的份数...将宽度分成两份占满类似flex布局的里的flex属性。...，在100px*100px内的方格内水平垂直居中，整个网格也水平居中在了页面中，如果不设置红色方块大小的话里面的文字将会水平垂直居中。 ...注：如果移动到了，使用了area属性，分了区域的子元素的话，子元素不会移动位置，而是产生层叠的浮动效果，可以使用z-index属性来改变层级。

2.8K2 1

写一个自适应九宫格图片栏

小刘同学负责企微内嵌 H5 开发，按照这个项目一贯的做法 UI 只出了移动端设计稿。今天的页面有个附件展示组件，不点击的时候大概就像微博图片那样直接九宫格展示。...（点击再依据不同附件类型走各自的逻辑暂且不表）简单，对吧？小刘吭哧吭哧搞得差不多了，然后叫产品去开发环境瞅一眼。只见产品在 PC 企微客户端打开页面，横着一拉，小刘的组件就横向散开来了。...一问小刘，原来长宽都是写的固定多少 rem。项目本身之前一直丢在企微移动端里展示，也就一直没考虑sizechange的情况。。。小刘改了好一会还没改好。于是写个demo给他。...: wrap; margin: 0 auto; } .img-item-wrap { box-sizing: border-box; width: 33.33%..." alt="" /> 复制代码涉及到两个知识点： padding 百分比是相对于容器内容区域的宽度

5392 0

万字总结 CSS 布局

下面我们列举一下它们各自的特点：「块级元素：」霸占一行，不能与其他任何元素并列能接受宽、高如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽「行内元素：」与其他元素并排不能设置宽...默认的宽度就是文字的宽度在HTML中，标签分为：「文本级」和「容器级」。...与div无异；此时的span能够设置高度和宽度；并且霸占一行，别人不能与之并排；如果不设置宽度，那么将撑满父亲。...在块级维度上元素会一个接一个排列下去，当你滚动页面时元素也会随着滚动。当你改变元素的position属性时，通常情况下你也会设置一些偏移量来使元素相对于参照点进行一定的移动。...grid-template-columns: 100px auto 100px; 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度

5.6K2 0

移动web开发之流式布局

通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。...流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度）京东首页案例...search-wrap { position: fixed; /* 解决子盒子.search外边距合并问题 */ overflow: hidden; height: 44px; /* 固定定位的盒子需给定宽度... ，且给百分比需在一定范围内*/ width: 100%; max-width: 640px; min-width: 320px; } /* 左右两个盒子用定位不占位置*/ ....; } /* 品牌日 */ .main-content .brand div { float: left; width: 33.33%; } .main-content .brand div

4985 0

流体布局、响应式布局

PC及移动端页面适配方法设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局+流体布局 2、移动端适配：流体布局+少量响应式基于rem的布局下面先来看看一个布局的问题...布局问题首先写四个div ? 按照百分比来设定宽度，无论如何缩放浏览器，这四个div都会自动调整大小。那么如果设置一个边框呢？设置边框 ?...max-width:768px){ .left_con{width:100%;} .right_con{width:100%;} } 看完上面的示例，下面再来实操一下看看。...当浏览器缩放宽度小于800px，那么div的大小就变为50% ?...当浏览器缩放宽度小于500px，那么div的大小就变为98% 这就是响应式布局了，根据宽度的变化，响应变化相关的样式，达到适配不同的浏览器大小。

2K3 0

从零开始学 Web 之移动Web（七）Bootstrap

100%. 2、.container-fluid ：实现宽度为全屏 100% 的容器。...“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。... 解释：上面四个div，如果在超小屏幕上就 100%显示（占12栅格）；在小屏幕上...，每个div占50%显示；在中等屏幕上，每个div占25%显示；在大屏幕上，每个div占33.33%显示。...因为：如果在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格；如果外层添加了container,那么参照就是核心样式文件所设置的容器宽度 <div class="container

5.6K3 0

CSS3中Grid布局

search=grid 可以看出95%的用户的浏览器都兼容这个新特性了。 Grid属性 Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；容器内的项的属性称为项目属性。...100px 100px; 使用百分比 grid-template-columns: 33.33% 33.33% 33.33%; 使用auto grid-template-columns: 100px...: repeat(2, 100px 20px 80px); 每列宽度100px，然后自动填充，直到容器不能放置更多的列 grid-template-columns: repeat(auto-fill,...就是把宽度或高度分成了几等等份。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。...，自动放置在每一个网格。

4824 0

Grid网格布局入门

1 2 3 上面代码中，最外层的元素就是容器，...上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。三、容器属性 Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。...33.33% 33.33%; } （1）repeat() 有时候，重复写同样的值非常麻烦，尤其网格很多时。...grid-template-columns: repeat(2, 100px 20px 80px); 上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px...grid-template-columns: 100px auto 100px; 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

2.1K2 0

移动端常用适配方案四

DOCTYPE html> 移动端常用适配方案四移动端常用适配方案四补充 <script...，扩大一半之后就变为了 640 960 那么这个时候你就会发现已经与视口的宽度是一个一一对应的关系了，然后在一一对应关系的视口当中先进行布局，布局完毕之后在放入真正视口当中，然后在进行缩小一半，然后正是因为它们是一一对应的关系所以说你看到的界面就没有变小了

2310 0

grid布局方式的使用「建议收藏」

1 2 3 上面代码中，最外层的元素就是容器....container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33%...33.33% 33.33%; } （1）repeat() 有时候，重复写同样的值非常麻烦，尤其网格很多时。...grid-template-columns: repeat(2, 100px 20px 80px); 上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为...grid-template-columns: 100px auto 100px; 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度

1.9K1 0

一文搞定各类前端常见布局方式

*/ margin-left: -100%; /* 向左移动自身宽度到目标位置 */ position: relative; left: -100px;}/* 【step3】处理right *...">rightfooter【step2】处理left设置 left 的 margin-left 为 -100%，实现 left 从当前行移动到上一行...变 table 后，默认宽度从 100% 变为 0，需要设置父节点宽度为 100%.col1 { background-color: red; }.col2 { background-color...后，默认宽度从 100% 变为 0 */ width: 100%; display: table;}.col1, .col2, .col3, .col4 { height: 100px; display...如设计稿宽度为 750px，一个设计稿宽 25px 的 div，设置 width: 0.25rem; 即可10.3 @media 媒体查询针对不同屏幕分辨率定义不同样式，从而达到自适应效果，例如移动端和

1.3K3 0

【CSS】340- 常用九宫格布局的几大方法汇总

原理原理：外层box盒子overflow和ul元素宽度死值相结合其实换一种角度和思路，又是一个解决方法，不用margin负值，我们想要li要对其ul两端效果，之所以纠结是因为li又需要margin-right...关键点 1. page最外层的父元素使用absolute负责占位，给子元素们把空间拉开。或者用宽高也行 ? 2. 每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列 3....设置每一行中单个元素的宽度： grid-template-columns，每个宽度值100px根据业务需要设置。给三个设置了宽度就长这样了。 ? 3....grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }...如果移动求快准狠，就用后几招。 ? 至此，布局篇告一段落~

1.2K1 0

css设计中的不变与可变

移动端的可变与不变有很多刚入门移动端重构的人一般都会问一个问题，移动端是不是都要用百分比啊。其实抛开那些新的单位rem、vw、vh等，移动端除了百分比，px也是可以用的，根本不是你想象的那样。...全屏的图片滚动全屏的这个东西，在vw还不能使用的情况下，那非100%莫属了（这里的全屏是指宽度铺满整个屏幕，不包括高度）。...这个估计90%的移动端都有这个效果，当然不可能设计给你的是375px的稿子，然后你就做了个375px宽度的效果。...，可以使用的技术有flex，float，table-cell等，其中float应该是最low的，因为你必须要设置item的宽度，三等分设置33.33%，四等分设置25%等，这种重复利用性太low，已经不适合更高级的移动端了...，总之，在移动端的可变因子比pc上更多，更多的对宽度或高度的不确定，就需要各种方法去避免直接设置死宽度或高度，当然庆幸的是，css3的支持让这些不确定因素的控制变得趋向简单。

1.2K6 0

css设计中的不变与可变

移动端的可变与不变有很多刚入门移动端重构的人一般都会问一个问题，移动端是不是都要用百分比啊。其实抛开那些新的单位rem、vw、vh等，移动端除了百分比，px也是可以用的，根本不是你想象的那样。...全屏的图片滚动全屏的这个东西，在vw还不能使用的情况下，那非100%莫属了（这里的全屏是指宽度铺满整个屏幕，不包括高度）。...这个估计90%的移动端都有这个效果，当然不可能设计给你的是375px的稿子，然后你就做了个375px宽度的效果。...，可以使用的技术有flex，float，table-cell等，其中float应该是最low的，因为你必须要设置item的宽度，三等分设置33.33%，四等分设置25%等，这种重复利用性太low，已经不适合更高级的移动端了...，总之，在移动端的可变因子比pc上更多，更多的对宽度或高度的不确定，就需要各种方法去避免直接设置死宽度或高度，当然庆幸的是，css3的支持让这些不确定因素的控制变得趋向简单。

7031 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭