【纯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, ...
随机推荐
- py-faster-rcnn之从solver文件创建solver对象，建立pythonlayer
faster-rcnn在训练阶段,根据一个solver的prototxt文件创建相应的网络.仅凭一个prototxt就创建网络?其实还涉及到自定义的PythonLayer. 比如lib/rpn/anc ...
- Scrum Meeting 20161209
本周Sprint Master 史少帅 会议概要 工作总结: · 陈双, 王永超: 打分功能合并到主分支并且测试成功 · 鲍航波 录音上传.下载接口封装完成,可供调用 · 侯宇泰, 史少帅: 修复录音 ...
- 1009: [HNOI2008]GT考试
1009: [HNOI2008]GT考试 Time Limit: 1 Sec Memory Limit: 162 MB Description 阿申准备报名参加GT考试,准考证号为N位数\(X_1X_ ...
- IT这一行，如可高速下载国外资源之迅雷设置免费SSH代理下载国外资源
本文转自SUN'S BLOG 原文地址:IT这一行,如可高速下载国外资源之迅雷 我们这些做IT这一行的人,经常,下载一些国外的一些资源,可是让人蛋碎的是,往往这些资源下载都慢的像蜗牛,真的让人无法忍受 ...
- Java网络编程--简单聊天程序
背景 毕业设计前的练手,学校小比赛中的一个题目. 开发环境 Java(eclipse)+Mysql 简介 使用Java+Mysql开发以个简单的聊天工具,在本次项目中实现了: 1. 用户登录(客户端至 ...
- 101 LINQ Samples
https://code.msdn.microsoft.com/101-LINQ-Samples-3fb9811b
- [Java] Maven 建立 Spring MVC 工程
GIT: https://github.com/yangyxd/Maven.SpringMVC.Web 1. 建立 WebApp 工程 下一步: 下一步: 选择 maven-archetype-web ...
- 关于MapReduce中自定义带比较key类、比较器类（二）——初学者从源码查看其原理
Job类 /** * Define the comparator that controls * how the keys are sorted before they * are pa ...
- 利用Java代码在某些时刻创建Spring上下文
上一篇中,描述了如何使用Spring隐式的创建bean,但当我们需要引进第三方类库添加到我们的逻辑上时,@Conponent与@Autowired是无法添加到类上的,这时,自动装配便不适用了,我们需要 ...
- 关于点击Invalidate Caches/Restart禁止插件后，重新加载--Android Studio
1:47:27 Plugin Error Problems found loading plugins: Plugin "Google Analytics Uploader" wa ...