【纯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, ...
随机推荐
- 关于闭包（closure）的一些概念
和其他大多数现代编程语言一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,JS函数对象的内部状态不仅包含 ...
- Python Day14
HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...
- js cookie
cookie:cookis:储存数据,当用户访问了某个网站的时候,我们就可以通过cookie来向访问者电脑上储存数据1)不同浏览器的存放cookie位置不一样,也是不能通用的2)cookie的存储是以 ...
- jstack工具查看系统线程问题
背景: 最近在做项目系统的异常测试,项目依赖于nkv,需要模拟依赖组件nkv异常时系统的响应及性能情况.通过tc工具模拟当服务器发送到nkv的请求超时时系统的响应.发现接口返回错误率100%,查看服务 ...
- javascript中this
js函数中的this指向问题:(this对象是在运行时基于函数的执行环境绑定的) 与普通变量获取不同,内部函数在搜索this和arguments这两个变量时,只搜索到其活动对象为止,所以this无法像 ...
- 入门：Java Map<String,String>遍历及修改
重点:在使用Map时注意key-value,key用于检索value的内容. 在正常情况下,可以不允许重复:在java中分为2中情况,一是内存地址重复,另一个是不同的地址但内容相等. 在使用Map是一 ...
- 【10-26】java调试技术学习笔记
调试工具 jdk自带的工具 jmap jconsole VisualVM jmap jmap -histo:live pid 列出该进程的所有活动实例统计信息 jmap -dump:live,file ...
- 参加SFDC的感触
今天参加了SFDC. 第一次参加这样的技术大会,感触总是有点. 简单的记录如下 1.自动化运维在行业已经成为趋势,未来DevOps 作为开发和运维统一已经是新时代对开发人员的要求.公司架构一个自己的自 ...
- Money， save or spend， this is a problem .
Win a lottery? Had a great hand at the casino? Did fortune shine upon you in the stock market? 彩票中了大 ...
- Toad各版本所包含的组件
Toad for Oracle Base Edition Toad for Oracle Knowledge Xpert for PL/SQL Knowledge Xpert for Oracle A ...