【纯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, ...
随机推荐
- Python实战项目网络爬虫 之 爬取小说吧小说正文
本次实战项目适合,有一定Python语法知识的小白学员.本人也是根据一些网上的资料,自己摸索编写的内容.有不明白的童鞋,欢迎提问. 目的:爬取百度小说吧中的原创小说<猎奇师>部分小说内容 ...
- zrt中文题
orzzrt.... 题意:给n个点n条边,问能形成几个无向连通图公式:ans=Σ(k=3~n){[n^(n-k)]* (n-1)!/2(n-k)!}推导:ans=Σ(k=3~n)(f(n,k)*h( ...
- bzoj3181: [Coci2012]BROJ
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
- maven打包jar包
参考http://www.cnblogs.com/justinzhang/p/4983633.html 新建jar类型的maven project (选择simple project ) 配置 < ...
- C#知识点记录
用于记录C#知识要点. 参考:CLR via C#.C#并发编程.MSDN.百度 记录方式:读每本书,先看一遍,然后第二遍的时候,写笔记. CLR:公共语言运行时(Common Language Ru ...
- 修改pip更新源
修改pip更新源 pip安装时默认访问pypi的,但是pypi的速度对于国内来说有点慢,还在国内也有一些pip的镜像源,造福广大程序员 pipy国内镜像目前有: http://pypi.douban. ...
- struts-hibernate-ajax完成区县和街道级联下拉框功能
前言:这次dao用的是hibernate,控制层和显示层用的是struts,页面用的是ajax... 啰嗦:我做这个用了很久,用了2周,难点没破解的地方,hibernate的多对一关系生成实体类中属性 ...
- 如何在Texstudio内加载语法检查词典？
如何在Texstudio编辑软件内加载"语法检查词典"? How to make dictionary work in TexStudio I am using TexStudio ...
- HiHo Coder字典树 TrieTree
题目地址:http://hihocoder.com/problemset/problem/1014 不得不吐槽一下这个OJ,题目质量是很好的,但是提交代码后返回的信息也太少了吧!!!本机测试无误,提交 ...
- oracle锁等级以及解锁
以下是两遍关于锁的介绍的文章,第一篇介绍锁等级以及常用操作,第二篇主要介绍了oracle中两个用以查询数据库任意对象的两个视图 一: http://www.cnblogs.com/lguyss/arc ...