【纯css】左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度。支持不规则图片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
</head>
<body>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
} /*--alist-- 左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度*/
.aListwrap,.aListInner,.aLisItemCon{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.aListwrap {
-webkit-box-orient: vertical;
flex-direction: column;
-webkit-flex-direction: column; width: 100%;
overflow: hidden;
} .aListInner {
flex: 1;
-webkit-box-flex: 1; align-items: stretch;
justify-content:space-around; overflow: hidden;
}
.aListBoxL {
padding-top: 30%;
width: 30%;
}
.aListBoxR { width: 70%;
position: relative;
}
.aListBoxL{
position: relative;
}
.aListBoxLIn,.aListBoxRIn,.aLisItemNoteIn{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; box-sizing: border-box;
overflow: hidden;
}
.aLisItemCon{ width: 100%;
height: 100%; -webkit-box-orient: vertical;
flex-direction: column;
-webkit-flex-direction: column;
}
.aLisItemTit{
flex: 0 0 auto;
}
.aLisItemNote{
flex: 1 1 auto;
position: relative;
}
.aLisItemBot{
flex: 0 0 auto;
} .diyRightTop{
height: 1.5em;
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.diyRightMid{
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0.3em;
}
.diyRightMid.table{
display: table;
margin: 0;
padding: 0;
}
.diyRightMidIn{
vertical-align: middle;
}
.diyRightMid.table .tablecell{
display: table-cell;
}
.diyRightBottom{
height: 1.5em;
line-height: 1.5em;
padding-top: 0.3em;
overflow: hidden;
}
.diyP1{
padding: 0.7em 0.5em;
} .diyMadia{
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
.diyMadia img{
margin: auto;
height: 100%;
max-width: 100%;
display: block;
} </style>
<div class="aListwrap">
<div class="aListInner">
<div class="aListBoxL">
<div class="aListBoxLIn diyP1">
<div class="diyMadia">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg" />
</div> </div>
</div>
<div class="aListBoxR">
<div class="aListBoxRIn diyP1">
<div class="aLisItemCon">
<div class="aLisItemTit"> <div class="diyRightTop">
标题标题标题标题标题标题标题标题
标题标题标题标题标题标题标题标题
标题标题标题标题标题标题标题标题
</div> </div>
<div class="aLisItemNote">
<div class="aLisItemNoteIn"> <div class="diyRightMid table">
<div class="diyRightMidIn tablecell">
右中部右中部右中部右中部右中部右中部右中部右中部右中部右中部
右中部右中部右中部右中部右中部右中部右中部右中部右中部右中部
右中部右中部右中部右中部右中部右中部右中部右中部右中部右中部
</div>
</div> </div> </div>
<div class="aLisItemBot"> <div class="diyRightBottom">
右下部右下部右下部右下部右下部右下部右下部右下部右下部
右下部右下部右下部右下部右下部右下部右下部右下部右下部
右下部右下部右下部右下部右下部右下部
</div> </div> </div> </div>
</div>
</div> </div> </body>
</html>
【纯css】左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度。支持不规则图片。的更多相关文章
- css实现左栏固定右栏自适应，高度自适应的布局
收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 纯CSS实现Div高度根据自适应宽度（百分百调整）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
- 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
随机推荐
- 爬虫框架--webmagic
官方有详细的使用文档:http://webmagic.io/docs/zh/ 简介:这只是个java爬虫框架,具体使用需要个人去定制,没有图片验证,不能获取js渲染的网页,但简单易用,可以通过xpat ...
- java 方法
方法命名规范要求 类的命名规范:“全部单词的 首字母必须大写”.那么在定义方法的时候也是有命名规范要求的:“第 一个单词的首字母小写,之后每个单词的首字母大写”,那么这就是方法 的命名规范. 递归调用 ...
- JUC学习笔记--Atomic原子类
J.U.C 框架学习顺序 http://blog.csdn.net/chen7253886/article/details/52769111 Atomic 原子操作类包 Atomic包 主要是在多线程 ...
- NFS服务器配置文档
Server:192.168.1.206/WindowsClient:192.168.1.208/CentOS一.搭建windows NFS服务:1.安装NFS服务器:打开"服务管理器&qu ...
- Request —— 让 Node.js http请求变得超简单
github地址: https://github.com/request/request 安装: npm install request --save-dev
- 个人对B/S项目的一些理解（二）
以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正. ----数据处理的升级 在上面的描述中,大家也看到了,远古时期的程序员,其实也听不容易 ...
- C# Struct结构体里数组长度的指定
typedef struct Point{ unsigned short x; unsigned short y; }mPoint;//点坐标 typedef struct Line{ mPoint ...
- IntelliJ IDEA mac 快捷键
cmd+O 查找类alt+cmd+O 符号shift+cmd+O 查找文件^+space 补全alt + F7 查找符号的使用情况F1 查看文档cmd+b 跳转定义,或者 鼠标+ctrlcmd+F12 ...
- Bubble Cup 8 finals F. Bulbo (575F)
题意: 给定初始位置,查询n次区间,每次查询前可以花费移动距离的代价来移动, 查询时需要花费当前位置到区间内最近的点的距离,求最小代价. 1<=n<=5000,1<=所有位置< ...
- 关于LESS
LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单. 翻译成大白话:写CSS算是体力活,并没有编程的感觉,不给前端人员装逼的机会,于是就搞了这玩意,相当于编程写C ...