纯CSS写正方形自适应宽高,且左侧高与正方形高保持一致
先上图
虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈
html:
<div class="box">
<div class="left">
<div class="zfxCon" style="">leftleftleftleftleftleftleftleftleftleftleftleft</div>
</div>
<div class="zfx">
<div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
</div>
<div class="zfx">
<div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
</div>
<div class="zfx">
<div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
</div>
<div class="zfx">
<div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
</div>
</div>
css:
.box{
color: #f00;
width: 100%;
float: left;
background-color: #269ABC;
}
.left{
width: 20%;
height: 0;
float: left;
margin:5% 2%;
padding-bottom: 70%;
position: relative;
}
.zfx{
width: 30%;
height: 0;
float: right;
margin: 5% 2%;
padding-bottom: 30%;
position: relative;
}
.zfxCon{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
word-wrap: break-word;
}
纯CSS写正方形自适应宽高,且左侧高与正方形高保持一致的更多相关文章
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- 纯CSS写九宫格样式,高宽自适应正方形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 用css写三角形,宽高可设置
1.不传@h,@c === @h; 2.元素width = @w, 元素height = @h*2 3.配合上.center()实现图标居中 less版本: //上下左右居中 .center(){ p ...
- 拓展-教你手把手用纯CSS写轮播图
先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...
- 纯css写一个大太阳的天气图标
效果 效果图如下 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...
随机推荐
- DesignPatternPrinciple(设计模式原则)一
设计模式六大原则(1):单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责. 问题由来:类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- Tomcat8安装及配置教程
Apache Tomcat8.0安装及配置教程.. Apache Tomcat8.0官方网站链接:http://tomcat.apache.org/ apache-tomcat-8.0.39-wi ...
- Oracle日期查询:季度、月份、星期等时间信息
--oracle有关时间信息 Select to_char(sysdate,'Q') from dual;--指定日期的季度 Select to_char(sysdate,'MM') from dua ...
- Java温故而知新-空心菱形
空心菱形 今天做题练手,题目是空心菱形,一开始没什么思路,去网上找了找,发现很难找到讲的通透的,自己现在独立做出来了,记录一下,以备后用. * * * * * * * * * * * * * * * ...
- Android检查更新下载安装
检查更新是任何app都会用到功能,任何一个app都不可能第一个版本就能把所有的需求都能实现,通过不断的挖掘需求迭代才能使app变的越来越好.检查更新自动下载安装分以下几个步骤: 请求服务器判断是否有最 ...
- js中数组对象根据内容查找符合的第一个对象
今天在写一个混合开发版的app,其中一个功能是扫描快递单号,客户要求不能扫描重复的快递单号!所有就验证查出. 首先实现思路就是: 1.定义一个全局数组变量:var nubList = []; 2.进入 ...
- 有哪些关于 Python 的技术博客?
Python是一种动态解释型的编程语言,它可以在Windows.UNIX.MAC等多种操作系统以及Java..NET开发平台上使用.不过包含的内容很多,加上各种标准库.拓展库,乱花渐欲迷人眼.因此如何 ...
- java Io流中FileInputStream和BufferedInputStream的速度比较
首先是对FileInputStream 加上 FileOutputStream 对文件拷贝的应用 我这里拷贝的是一个视频.当然,你们拷贝什么都可以,当文件越大时效果越明显 下面是对BufferedIn ...
- 1000以内完全数(完美数)获取实现---基于python
"""题目: 如果一个数恰好等于它的因子之和,则称该数为"完全数" .各个小于它的约数(真约数,列出某数的约数,去掉该数本身,剩下的就是它的真约数)的 ...