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

2个并排的不同宽度(40%/60%)的全宽div标签,按比例缩小到100%宽度并最终以100%宽度堆叠

这个问答内容涉及到前端开发和CSS布局的知识。在这个问题中,我们需要将两个并排的不同宽度的div标签按比例缩小到100%宽度,并最终以100%宽度堆叠。

首先,我们可以使用CSS的flexbox布局来实现这个效果。以下是一个可能的解决方案:

HTML代码:

代码语言:txt
复制
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码:

代码语言:txt
复制
.container {
  display: flex;
  width: 100%;
}

.left {
  flex: 40%;
  background-color: #ccc;
}

.right {
  flex: 60%;
  background-color: #ddd;
}

在上述代码中,我们创建了一个父容器div,使用flexbox布局,并设置其宽度为100%。然后,我们在父容器中创建了两个子容器div,分别设置了左侧div的宽度为40%,右侧div的宽度为60%。通过设置flex属性,我们可以按比例分配宽度。

接下来,我们需要将两个div按比例缩小到100%宽度并最终以100%宽度堆叠。我们可以使用媒体查询来实现这个效果。以下是一个可能的解决方案:

代码语言:txt
复制
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left, .right {
    flex: 100%;
  }
}

在上述代码中,我们使用@media查询来针对屏幕宽度小于等于768px的情况进行样式调整。当屏幕宽度小于等于768px时,我们将父容器的flex-direction属性设置为column,使两个子容器垂直堆叠。然后,我们将左侧和右侧div的flex属性都设置为100%,使它们都占满父容器的宽度。

这样,无论屏幕宽度是大于768px还是小于等于768px,两个div都会按比例缩小到100%宽度,并最终以100%宽度堆叠在一起。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的推荐。但是,腾讯云作为一家知名的云计算服务提供商,提供了丰富的云计算产品和解决方案,可以根据具体需求选择适合的产品和服务。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

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

相关·内容

CSS盒子模型

标签分为两种等级: 1) 块级元素 ● 霸占一行,不能与其他任何元素并列 ● 能接受、高 ● 如果不设置宽度,那么宽度将默认变为父亲100%。...2) 行内元素 ● 与其他行内元素并排 ● 不能设置、高。默认宽度,就是文字宽度。 在HTML中,我们已经将标签分过类,当时分为了:文本级、容器级。...此时这个标签,和一个div无异: ● 此时这个span能够设置宽度、高度 ● 此时这个span必须霸占一行了,别人无法和他并排 ● 如果不设置宽度,将撑满父亲 标准流里面限制非常多,标签性质恶心...比如,我们现在就要并排、并且就要设置高。 所以,移民!脱离标准流!...也就是说,一旦一个元素浮动了,那么,将能够并排了,并且能够设置高了。无论它原来是个div还是个span。

1.2K30

单屏页面响应式适配玩法

: 900(或1080) - 180 = 720px 180 = 60 + 20 + 100 60: MAC 桌面程序坞动态尺寸,60 可能是我常用尺寸吧,那就先这个 20: MAC 桌面最顶部...icon 放置栏高度 100: Chrome 标签页高度 + 地址栏高度 + 书签栏高度 2、Windows + Chrome 然后我们再看看 Windows + Chrome 情况, 1366...所以不管在哪种系统下,浏览器宽度与分辨率是保持一致(程序坞在底部时候,程序坞在左右两边一般情况对宽度没有影响),高度则根据系统及浏览器不同各有不同,比方说 Safari 没有书签高度。...因为高度变矮,内容尺寸会随之变小,而页面是 1190 ,水平居中布局,所以当只改变浏览器宽度情况下,不会出现宽度变化溢出问题(除非分辨率超大,然后高度居很高,只把宽度缩很小情况,这个下面会说到)...看看效果(当然这个是最终效果,只改变宽度拉伸适配在最后会说): 8、特殊场景 这里就是刚刚说到 分辨率超大,然后高度居很高,只把宽度缩很小情况,因为设计稿是长宽比例为横向矩形,所以明显与用长宽比为竖向矩形来看页面是背道而驰

1.9K20

图片横向等高瀑布流,每行占满,限制行数 实现

,或者手动定义 使用flex-grow可以分配比例分配主轴剩余空间 如果有10张图片需要放置,第一行仅可以放置四张图片,剩余100px空间,那么各图片flex-grow可以直接配置成图片宽度width..." height="100%"> 上面页面模板中,flex-grow 与 width值一致,用以比例分配每行剩余空间 另外可以看到这里有个...// 为了保证图片比例 paddingTop: h / w * 100 }); } paddingTop值,按照以下这个映射关系来看就好 容器高度...图片宽度不同,就直接导致了最终高度不同 所以,为了确保图片高度一致,假设有三张图片 50*50  100*100  50*150  放在了同一行中,flex布局会将三张图片所在容器高度自适应为最高那个...96 // 为了保证图片比例 97 paddingTop: h / w * 100 98 }); 99 } 100

2K60

CSS_Flex 那些鲜为人知内幕

例如: img { object-fit: cover; /* 图片比例缩放覆盖整个容器 */ object-position: center; /* 图片在容器中居中显示 */ } 2....>> 两个项目都会收缩,但它们会「比例收缩」。第一个子元素始终是第二个子元素宽度 2 倍。 flex-basis和width设置了元素假设大小。...Flexbox算法可能会「将元素收缩到低于这个期望大小」,但「默认情况下,它们将始终比例缩放,保持两个元素之间比例」。 如果我们不希望元素比例缩小,可以使用flex-shrink属性。...容器至少需要 500px 宽度,以便将这些子元素以其假设大小容纳其中。 假设我们将容器缩小到 400px。嗯,我们不能把 500px 内容塞进一个 400px 袋子里!我们有 100px 亏空。...包裹 到目前为止,我们所有项目都是并排或纵列。flex-wrap属性允许我们改变这一点。 如果容器宽度不能包含子元素的话,子元素会被隐藏。

19810

CSS 7:网页布局(传统布局,flex布局,布局套路)

: auto; margin-right: auto; 演示地址范例 注意 max-width和width区别:使用固定width时候,如果浏览器缩小到比设置宽度要小,那么会出现滚动条(不允许宽度小于...因为layout是固定宽度,而有背景色上下通栏是自适应屏幕宽度,所以当小于.layout宽度时候,会出现滚动条。...如果不自己算picture宽度 那么就可以使用 width:calc(25% - 8px) 左右不一样比例布局 1:3使用float: ...,那么这个已经成比例布局块不要动,在里面加div,然后里面的div加上margin-right就行了。...请看我博客,媒体查询CSS5:移动端页面(响应式) 图片处理技巧 为了防止图片收缩,尽量不要使用img标签,使用div标签然后使用 background:transparent url('xxx')

3.9K41

H5移动端开发学习总结

但当在高密度屏幕上,例如苹果视网膜屏幕,一个CSS像素跨越了多个设备像素。如果用户缩小到足够程度,一个CSS像素会变得明显比一个设备像素小。...它值可以下面的公式计算得到: 设备像素比 = 设备物理像素 / 设备独立像素 计算公式: 1px = (dpr)^2dp; 获得设备像素比后,便可得知设备像素与CSS像素之间比例。...设置页面窗口自动调整到设备宽度禁止用户及缩放页面 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale...; border: 1px solid red; /*line-height: <em>100</em>%;*/ } 我是超大字体...calc(<em>100</em>vw / 3.75); } 除以3.75这里是以iphone6为设计稿为标准<em>的</em>,<em>100</em>vw表示设备<em>宽度</em>。

95320

30 个案例教你用纯 CSS 实现常见几何图形

此时再给上下左右四个 border 一定宽度不同颜色,那么单纯由 border 填充盒子看起来是这样: 但内容盒有时候,四个 border 对接处就不是一个点,而是一个矩形(图中白色区域...对于一个 100px * 100px div,设置 border-radius:50%,就等于设置 div 四个角水平半径为 div 一半,垂直半径为 div一半,这样形成图形一定会是一个圆形...梯形 border 实现 前面说过,如果设置一个盒子高为 0,给一定 border,那么这个盒子看起来是这样: 在此基础上,如果给这个盒子一个宽度,会发生什么事呢?...梯形方向: 现在我们梯形是朝上或者朝下,如果想要设置方向为朝左或者朝右,可以纵向拉长对接点,也即保持 div 宽度为 0 同时,给它一定高度。 直角梯形: 这里只一个方向为例进行介绍。...太极图 这是最终要实现效果: 虽然它似乎是由不规则几何图形构成,但实际上,我们可以用规则几何图形堆叠形成太极图。

4.4K30

Flex 布局相关用法

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),最佳方式填充可用空间(主要是为了适应所有类型显示设备和屏幕大小)。...为了保证效果展示,父容器暂设width: 40%; min-height: 250px; 子项目分别设置不同 width: 10%|15%|20%; 高度暂设固定高度30px(但设置高度会时stretch...它接受一个不带单位值做为一个比例。主要用来决定伸缩容器剩余空间比例应扩展多少空间。 如果所有伸缩项目的“flex-grow”设置了“1”,那么每个伸缩项目将设置为一个大小相等剩余空间。...grow 表示在 item 总宽度比容器小时候,为了让 item 填满容器,每个 item 增加宽度。 假设有三个 basis 为 100px item。...把 basis 当成参数计算进去,这样就能保证减少宽度永远小于 basis。 所以我们可以得到修正后公式,一样最左边为例子,最后计算出来减少 60px,于是 item 就变成 140px。

1.4K10

Web前端进阶高薪必会54个CSS重难点知识梳理(1)

: 20px; 则计算得到父元素 line-height 值是 40px; 40px .box {width: 350px;height: 100px;background-color...line-height:2; 最终2*20px 子元素行高为40px*/ /*情况三:子元素继承父元素%百分比换算后60px ,所以子元素line-height:60px*/ } </style...block 设置元素为块级元素,块级元素可以独占⼀⾏,可设⾼,默认为父元素。 inline 行内元素类型。默认宽度为内容宽度,不可设置高,同行显示。...这3层结构计算规则具体如下 (1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终高。 (2)如果没有CSS尺寸,则使用HTML尺寸作为最终高。...(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。 (4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。

1.7K00

padding实现图片等比例自适应

对于padding属性而言,任意方向百分比padding都现对于宽度计算可以让我们轻松实现固定比例块级容器,举个例子,假设现在有个元素: div { padding: 50%; } 或者:...div { padding: 100% 0 0; } 或者: div { padding-bottom: 100%; } 则这个元素尺寸就是一个高1:1正方形,无论其父容器宽度是多少,这个...在传统固定宽度布局下,我们会通过给图片设定具体宽度和高度值,来保证我们图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现宽度很可能是不确定,例如手机端一个通栏广告,iPhone7...缩小浏览器宽度可以看到不同宽度布局效果,Gif效果截图如下: 此demo难点就是图片自适应同时保持比例,以及页面刷新时候没有布局稳固不晃动,其核心HTML和CSS代码如下: <div class=...对于这种图片宽度100%容器,高度比例场景,padding-bottom百分比值大小就是图片元素高宽比,就这么简单。

2.7K10

50道 CSS 经典面试题(包含答案)

大家好,又见面了,我是你们朋友栈君。 1 介绍一下标准CSS盒子模型?与低版本IE盒子模型有什么不同?...第二种全屏品字布局: 上面的div设置成100%,下面的div分别50%,然后使用float或者inline使其不换行。 13 常见兼容性问题?...清除浮动方式: 父级div定义height 最后一个浮动元素后加空div标签 添加样式clear:both。 包含浮动元素标签添加样式overflow为hidden或auto。...当百分比设定一个元素宽度时,它是相对于父容器宽度计算,但是,对于一些表示竖向距离属性,例如 padding-top , padding-bottom , margin-top , margin-bottom...等,当百分比设定它们时,依据也是父容器宽度,而不是高度。

94830

CSS专题,熟练布局技巧,需知文档流

高矮不齐,底边对齐 网页上两个不同内容出现高低不同时,底边对齐。如图: 3. 自动换行 块级元素和行内元素 在HTML中,我们已经将标签分为了:文本级、容器级。...CSS标准文档流也将标签分为两种等级: 1)块级元素 霸占一行,不能与其他任何元素并列; 能接受、高; 如果不设置宽度,那么宽度将默认变为父亲100%。...2)行内元素 与其他行内元素并排; 不能设置、高。默认宽度,就是文字宽度。...此时它和一个span无异, 此时这个div:不能设置宽度、高度;可以和别人并排了。 2. 行内元素可以设置成块级元素 语法为:display:block; “block”是“块”意思。...让标签变为块级元素。此时这个标签,和一个div无异,此时这个span:能够设置宽度、高度;必须霸占一行了,别人无法和他并排;如果不设置宽度,将撑满父亲。

75430

HTML5+CSS3

-- 第一条样式权重计算: 100+1+10+1,结果为112; 第二条样式权重计算: 100+10+1,结果为111; h2标题最终颜色为red --> 上去 2.CSS3新增选择器 1、E:...,页面适配方案有如下几种: 1、适配:响应式布局+流体布局 2、移动端适配: 流体布局+少量响应式 基于rem布局 流体布局 流体布局,就是使用百分比来设置元素宽度,元素高度实际高度写固定值,...置盒子尺寸计算方式为从边框开始,盒子尺寸,边框和内填充算在盒子尺寸内 响应式布局 响应式布局就是使用媒体查询方式,通过查询浏览器宽度不同宽度应用不同样式块,每个样式块对应是该宽度布局方式...配置参数 参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem单位比例,默认为40。...:30px 40px;设置背景图尺寸为30px,高为40px,这个属性不能合到background属性中 opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity

2.1K21

50道CSS面试题(附答案)

栈资源? 1 介绍一下标准CSS盒子模型?与低版本IE盒子模型有什么不同?...第二种全屏品字布局: 上面的div设置成100%,下面的div分别50%,然后使用float或者inline使其不换行。 13 常见兼容性问题?...清除浮动方式: 父级div定义height 最后一个浮动元素后加空div标签 添加样式clear:both。 包含浮动元素标签添加样式overflow为hidden或auto。...当百分比设定一个元素宽度时,它是相对于父容器宽度计算,但是,对于一些表示竖向距离属性,例如 padding-top , padding-bottom , margin-top , margin-bottom...等,当百分比设定它们时,依据也是父容器宽度,而不是高度。

1.5K30

C1 能力认证——Web基础

form 表单标签 input标签 元素是最重要表单元素,根据input元素不同type类型,表现形式也是不一样 类型 描述 text 普通文本框,一般默认20个字符宽度 textarea...,相当于下键盘space键产生空格,受字体影响,不同字体表现一致 空格     半角空格,占1/2个中文字符宽度,基本不受字体影响,不同字体空格宽度表示一致 空格  ...全角空格,占1个中文字符宽度,基本不受字体影响,不同字体空格宽度表示一致 < < &#60; 小于号 > > > 大于号 & & & &符号 " " "... C5栈能力认证 #ff0000 现有以下代码,文本「C1见习能力认证」字体颜色最终显示为_____?...div { width: 100px; height: 100px; margin: 5px 10px; } 110 现有以下代码,请问最终div实际宽度是_______px

3.3K40

一篇文章搞定多列布局--等宽,等高,自适应

auto: 这是默认值,表示表格内容优先,列宽度是由列单元格中没有折行内容设定。此算法有时会较慢,这是由于它需要在确定最终布局之前访问表格中所有的内容。...假如父级元素总宽度为500px, 子元素A, B, C三个元素flex-grow分别为1, 2, 2,那他们宽度比例为1:2:2,三个元素最终宽度100px, 200px, 200px; flex-shrink...A, B ,C份数都是1,所以他们收缩14px,他们最终宽度是120 - 14 = 106px;D, E份数是2,所以他们应该收缩14 * 2 = 28px,最终宽度是120 - 28 = 92px...多列不定+自适应前面几种方案都可以实现,float + overflow为例: 等宽 等宽布局就是几个元素,每个元素宽度是一样,而且他们之间还可能有间距。...不设置table-layout,或者设置为auto,这其实是一样,因为他默认值就是auto,那里面的列都是根据内容长度来自适应,如果我们想让一列不留白,缩小到内容宽度,只需要给这一列一个很小

2.7K10

《CSS 世界》读书笔记-流与

如果不指定高,默认会继承父元素宽度,并且独占一行,即使宽度有剩余也会独占一行。例子中,宽度继承于父元素 body。 2. 高度一般子元素撑开高度为准,当然也可以自己设置宽度和高度。...3.1 width: auto 默认值是 auto,至少包含了以下 4 种不同宽度表现: (1)充分利用可用空间,fill-available。...给子元素  标签设置了 width: 100%,此时 内容宽度 已经等于外元素宽度,所以超出尺寸是设置 margin 和 padding。...为了不影响之前布局,我们还需要通过计算减去 40px padding 大小才能和之前大小保持一致: .box {    width: 60px; /* 通过计算,减去 40 像素 */  padding...{  width: 102px; } .first-div {  border: 1px solid; } 嵌套一层标签,父元素定,子元素因为 width 使用是默认值 auto,所以会如水流般自动填满父级容器

1.2K20
领券