【css3】神奇的3*3根据父节点宽度自适应的盒子

已于 2022-10-17 09:36:14 修改
阅读量217 收藏
点赞数
分类专栏： 样式 css3 文章标签： css3 html 前端
于 2022-10-17 09:09:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33014695/article/details/127356950
版权
样式 同时被 2 个专栏收录
32 篇文章 0 订阅
订阅专栏
css3
3 篇文章 0 订阅
订阅专栏

神奇的3*3盒子根据父节点自适应宽度。

  

 代码

嵌套需要在里面的盒子absolute，否则padding会互相叠加导致换行。

<template>
 
 
    <div class="cube-box" style="width: 80%;margin: 0 auto">
      <div class="cube  ">
        <div class="cube-inner">
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
        </div>
      </div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
    </div>
 

 
</template>
 
<style scoped>
.cube {
  width: 33.33333333333%;
  display: inline-block;
  box-sizing: border-box;
  font-size: 0;
  box-shadow: inset 0 0 0 1px #ffffff;
  padding-bottom: 33.33333333333%;
  overflow: hidden;
  position: relative;

}

.cube-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cube-box {
  font-size: 0;
}
</style>

 这是table版本的，嵌套的话也是需要absolute小盒子再嵌套一次。

 <table>
      <tbody>
      <tr>
        <td>`</td>
        <td>`</td>
        <td>`</td>
      </tr>
      <tr>
        <td>`</td>
        <td>`</td>
        <td>`</td>
      </tr>
      <tr>
        <td>`</td>
        <td>`</td>
        <td>`</td>
      </tr>
      <tr>
        <td>`</td>
        <td>`</td>
        <td>`</td>
      </tr>
      </tbody>
    </table>

tbody, table, tr {
  width: 100%;
  border-collapse: collapse;
}

tbody {


}

td {
  padding-bottom: 33.33333333333%;
  border: 1px solid crimson;
  position: relative;
}

这是我经过各种微调后理想效果之一，但是还没到。

 

.cube {
  width: 33.33333333333%;
  display: inline-block;
  box-sizing: border-box;
  font-size: 0;
  /*box-shadow: inset 0 0 0 1px #ffffff;*/
  padding-bottom: 33.33333333333%;
  overflow: hidden;
  position: relative;

}
.text-mid{
  display: grid;
  align-items: center;
  justify-items: center;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  font-size: 1rem;
}
.cube-inner {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom:  5px;
  left:  5px;
}
.cube-inner-image{
  object-fit: cover;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}
.cube-box {
  font-size: 0;
  padding: 5px;
  border:1px solid  #42b983;
}
    <div class="cube-box" style="width: 80%;margin: 0 auto">
      <div class="cube  ">
        <div class="cube-inner">
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=2121915427,2168624551&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666112400&t=36caa99d55237d803431ecaf4abbce96"/>
            </div>
          </div>
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=476266673,1542201690&fm=253&fmt=auto&app=138&f=JPEG?w=270&h=185"/>
            </div>
          </div>
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=464736753,4100005328&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=519"/>
            </div>
          </div>
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=2880576921,3981259860&fm=253&fmt=auto&app=138&f=JPEG?w=371&h=500"/>
            </div>
          </div>
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img0.baidu.com/it/u=810480749,3476325787&fm=253&fmt=auto&app=138&f=JPEG?w=427&h=640"/>
            </div>
          </div>
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=1561320362,1562554041&fm=253&fmt=auto&app=138&f=JPEG?w=336&h=512"/>
            </div>
          </div>
          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=1331722341,1941914216&fm=253&fmt=auto&app=138&f=JPEG?w=120&h=160"/>
            </div>
          </div>

          <div class="cube">
            <div class="cube-inner">
              <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=3914701278,356238033&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/>
            </div>
          </div>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=2121915427,2168624551&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666112400&t=36caa99d55237d803431ecaf4abbce96"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner text-mid">我的应用</div>
      </div>
      <div class="cube"> <div class="cube-inner text-mid">我的应用</div></div>
      <div class="cube"> <div class="cube-inner text-mid">我的应用我的应用我的应用我的应用</div></div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=3914701278,356238033&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img0.baidu.com/it/u=934498461,73020862&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img0.baidu.com/it/u=3934080263,2967130006&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=933"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=780952297,1200937487&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=305"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=3665616389,614777451&fm=253&fmt=auto&app=138&f=JPEG?w=490&h=600"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=476266673,1542201690&fm=253&fmt=auto&app=138&f=JPEG?w=270&h=185"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=464736753,4100005328&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=519"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=2880576921,3981259860&fm=253&fmt=auto&app=138&f=JPEG?w=371&h=500"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img0.baidu.com/it/u=810480749,3476325787&fm=253&fmt=auto&app=138&f=JPEG?w=427&h=640"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img1.baidu.com/it/u=1561320362,1562554041&fm=253&fmt=auto&app=138&f=JPEG?w=336&h=512"/>
        </div>
      </div>
      <div class="cube">
        <div class="cube-inner">
          <img alt="" class="cube-inner-image" src="https://img2.baidu.com/it/u=1331722341,1941914216&fm=253&fmt=auto&app=138&f=JPEG?w=120&h=160"/>
        </div>
      </div>
    </div>

KatyLight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 3*3网格实现只有内部边框，取消外部边框的样式。
PrimaryColor
05-14 671
效果图： 说明：白色是需要实现的边框，红色的边框不用看，只是为了称托出外部的边框。最终实现只有内部边框，没有四周的边框。 先说说我的实现思路： 1.默认情况每个都加右边框和下边框。 2.div为3的倍数没有右边框。 3.最后三个元素没有下边框。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
前端三列布局的几种实现方式
sinuo123_5的博客
12-16 1418
本文主要讲述几种常用的前端三列布局的方式。 1.两侧浮动＋中间自动铺开 主要是左右盒子两边分别float:left,float:right，中间通过margin值自动撑开。代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title...
css元素的显示模式
m0_68840537的博客
04-16 129
引言:元素的显示模式通俗的说就是给一个元素/标签进行一次分类，分类的依据是元素以什么样的方式显示在页面里，例如是独占一行（div）还是一行多个（span），元素的显示模式一般认为有三种:块级、行内元素和行内块元素。 7.1. 块级元素 块级元素，顾名思义就是成块状显示的元素，块内可以包含其他的块级元素、行内元素、行内块元素作为子元素，并且块级元素具有以下特征: 一个块级元素必须独占一行，多行书写会自动换行 高度、宽度、内外边距都可以自主设置 宽度不设置的情况下默认是父元素宽度的100% 本身
CSS：宽高自适应详解
ZJH_are的博客
07-17 9285
2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小！-浏览器的高度默认是0,html,body{height100%}-HTML,BODY表示浏览器,默认是块级元素,宽度是100%...
css设置盒子自适应宽度或高度
最新发布
weixin_42596287的博客
12-18 5216
css设置盒子自适应宽度或高度
CSS布局
linmuqi0928的博客
03-09 1147
传统网页布局的三种方式 网页布局的本质——用CSS 来摆放盒子。把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 一、 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. （1） 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table （2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。...
css和css3弹性盒模型实现元素宽度（高度）自适应
01-19
一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>自适应</title> <style> *{ padding: 0; ...
css3自适应浏览器图片布局特效
07-24
"css3自适应浏览器图片布局特效"是一个专门针对这一需求的解决方案，它能够使图片在不同宽度的浏览器窗口下自动调整布局，以保持页面的美观和用户体验。 首先，我们要理解CSS3中的媒体查询（Media Queries），这是...
CSS 实现div宽度根据内容自适应
09-24
本文将详细介绍如何使用CSS来实现div宽度根据内容自适应。 首先，我们需要理解默认情况下，div元素作为块级元素，它的宽度会占据父元素的整个宽度，除非显式设置了宽度值。因此，如果希望div宽度自适应内容，我们...
使用CSS3MediaQueries实现网页自适应
02-25
当今屏幕分辨率从320px(iPhone)到2560px(大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑...用CSS3媒体查询（Mediaquery）来检验屏幕分辨率，如果小于980px，页面宽度将会用自适应来取
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
73、美团算法题---用CSS实现一个3×3九宫格
sunnnnh的博客
10-02 534
一、使用grid布局 参考Grid布局简介 - 云+社区 - 腾讯云 （1）fr单位：CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。 如果我们将grid-template-columns的值更改为1fr 2fr 1fr。总宽现在是四个 fraction 单位，第二列的宽度将会是其它两列的两倍，其它列各占一个 fraction，此时这些子元素都会随着外层盒子container宽度的变化而变化。 （2）repeat(参数
css3 子节点等宽样式,css 设置div基于父元素宽度的宽高相等的样式
weixin_39759890的博客
08-03 1284
1. 前言在移动开发中，有时候需要设置一个宽高相等的div，并且为了使它能够适配更多的屏幕，于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案，让一些后端开发不用再写繁琐的js。2. 实现代码html:testcss:.wrapper{position:relative;height:0;padding-top:80%;}.box{position:absolute;widt...
div盒子最小宽度_Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
weixin_30173361的博客
01-14 1825
Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法网上方法很多，个人认为以下两种思想是最为常用的。一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。第二种方法是使用flex布局，不过有一些兼容性问题。直接上代码Document.div1{background: red;}.div2{background: yellow;}.way1>.div1{float:left;width...
实现高度自适应等于宽度的正方形盒子
Kamen_Yip的博客
01-09 907
padding-bottom为百分比时，是相对宽度取百分比值 div { width: 20％; padding-bottom: 20％; height: 0; overflow: hidden; } 这样就能实现自适应的正方形 高度设置为0能保证盒子不被内容撑开 ...
css img自适应盒子尺寸
热门推荐
LONGLONGAGO_RU的博客
04-24 1万+
.img-cantainer { position: relative; width: 260px; height: 150px; overflow: hidden; img { position: absolute; top: 50%; min-...
CSS-父元素宽度自适应子元素宽度之和
anleng6817的博客
08-22 3245
最近碰见这样一个需求，要让图片横向排列设置 x 方向的滚动条滚动查看，原本当直接创建一个 IFC（inline，float 什么的）就解决了，搞了半天发现搞不定（IFC 也是不能父元素宽度自适应子元素宽度之和的，因为会换行。。），最后用 flex 解决了（然后又发现使用 table 也是可以的），然后学了两个新名词 GFC 和 FFC。。这里就说一下我的解决方法，给大家抛个砖。 flex...
css3 计算属性 calc()
abc20140818的博客
03-29 329
.elm { width: calc(expression); } 注意事项： 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式...
css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结
weixin_39744512的博客
01-13 3221
1.元素不设宽度第一种情况：元素为文档流中元素dddddd结论1：把子元素定位换成position：relative与上述例子表现一样，因此在元素不设宽度时，若元素为文档流中元素，则此元素继承其父元素宽度第二种情况：元素为脱离文档流元素dd结论2：把子元素定位换成position:absolute或position:fixed与上述例子表现一样，因此在元素不设宽度的情况下，若子元素为脱离文档流元素...
CSS3盒子模型：边框、内边距与阴影解析
“第六章 盒子模型”是关于HTML5和CSS3网页设计的一个章节，主要探讨了如何利用CSS3来实现网页元素的盒子模型布局、样式调整以及相关的视觉效果。 在网页设计中，盒子模型（Box Model）是理解元素布局的基础。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值