【纯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, ...
随机推荐
- BZOJ 3676: [Apio2014]回文串
3676: [Apio2014]回文串 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 2013 Solved: 863[Submit][Status ...
- 【Android群英传】学习笔记（二）
在本篇笔记中,小编将记录关于Android Studio使用过程的小技巧 在下面文章为Android Studio 简称As ① 使用Android Studio第一次创建项目等待时间很长? 原因: ...
- linux下cetos7无线网络设置办法
首先检查是否安装了networkmanger wifi.RPM 检查方法,终端输入rpm一qa 如果不存在,利用rpm一ivh 文件名 进行安装,并且重启
- linux下安装jdk
第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 Java -version ,会有下面的信息: Javaversio ...
- BZOJ3879: SvT
后缀数组裸题,每次的查询单调栈扫一遍就完了.为什么要写虚后缀树= =后缀数组不是自带虚树的结构么= = #include<cstdio> #include<algorithm> ...
- nginx-1.8.0 rpm包制作
1.安装rpm-build # yum install rpm-build 2.创建制作RPM包目录 # cat /root/.rpmmacros %_topdir /root/rpmbuild %_ ...
- 《SQL必知必会》学习笔记(一)
这两天看了<SQL必知必会>第四版这本书,并照着书上做了不少实验,也对以前的概念有得新的认识,也发现以前自己有得地方理解错了.我采用的数据库是SQL Server2012.数据库中有一张比 ...
- selenium 打开浏览器
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebE ...
- jexus5.8.2 linux x64通用版[未集成mono] 配置https
一.找到mono安装位置 sudo find / -name mono 二.首先查看"/lib"或"/usr/lib"等系统库文件夹中是否有SSL库文件的名字, ...
- redis-window 集群配置
参考文章: 1.http://www.cnblogs.com/zr520/p/5057141.html (主从配置) 2.http://www.cnblogs.com/lori/p/5825691.h ...