查看演示

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.     <title></title>
  7. </head>
  8. <body>
  9. <style>
  10.     html,body{
  11.         margin: 0;
  12.         padding: 0;
  13.         height: 100%;
  14.     }
  15.  
  16.     /*--alist-- 左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度*/
  17.     .aListwrap,.aListInner,.aLisItemCon{
  18.         display: -webkit-box;
  19.         display: -ms-flexbox;
  20.         display: -webkit-flex;
  21.         display: flex;
  22.     }
  23.     .aListwrap {
  24.         -webkit-box-orient: vertical;
  25.         flex-direction: column;
  26.         -webkit-flex-direction: column;
  27.  
  28.         width: 100%;
  29.         overflow: hidden;
  30.     }
  31.  
  32.     .aListInner {
  33.         flex: 1;
  34.         -webkit-box-flex: 1;
  35.  
  36.         align-items: stretch;
  37.         justify-content:space-around;
  38.  
  39.         overflow: hidden;
  40.     }
  41.     .aListBoxL {
  42.         padding-top: 30%;
  43.         width: 30%;
  44.     }
  45.     .aListBoxR {
  46.  
  47.         width: 70%;
  48.         position: relative;
  49.     }
  50.     .aListBoxL{
  51.          position: relative;
  52.      }
  53.     .aListBoxLIn,.aListBoxRIn,.aLisItemNoteIn{
  54.         position: absolute;
  55.         top: 0;
  56.         right: 0;
  57.         bottom: 0;
  58.         left: 0;
  59.  
  60.         box-sizing: border-box;
  61.         overflow: hidden;
  62.     }
  63.     .aLisItemCon{
  64.  
  65.         width: 100%;
  66.         height: 100%;
  67.  
  68.         -webkit-box-orient: vertical;
  69.         flex-direction: column;
  70.         -webkit-flex-direction: column;
  71.     }
  72.     .aLisItemTit{
  73.         flex: 0 0 auto;
  74.     }
  75.     .aLisItemNote{
  76.         flex: 1 1 auto;
  77.         position: relative;
  78.     }
  79.     .aLisItemBot{
  80.         flex: 0 0 auto;
  81.     }
  82.  
  83.     .diyRightTop{
  84.         height: 1.5em;
  85.         line-height: 1.5em;
  86.         overflow: hidden;
  87.         white-space: nowrap;
  88.         text-overflow: ellipsis;
  89.     }
  90.     .diyRightMid{
  91.         position: absolute;
  92.         width: 100%;
  93.         height: 100%;
  94.         box-sizing: border-box;
  95.         padding: 0.3em;
  96.     }
  97.     .diyRightMid.table{
  98.         display: table;
  99.         margin: 0;
  100.         padding: 0;
  101.     }
  102.     .diyRightMidIn{
  103.         vertical-align: middle;
  104.     }
  105.     .diyRightMid.table .tablecell{
  106.         display: table-cell;
  107.     }
  108.     .diyRightBottom{
  109.         height: 1.5em;
  110.         line-height: 1.5em;
  111.         padding-top: 0.3em;
  112.         overflow: hidden;
  113.     }
  114.     .diyP1{
  115.         padding: 0.7em 0.5em;
  116.     }
  117.  
  118.     .diyMadia{
  119.         width: 100%;
  120.         height: 100%;
  121.         border: 1px solid #ccc;
  122.     }
  123.     .diyMadia img{
  124.         margin: auto;
  125.         height: 100%;
  126.         max-width: 100%;
  127.         display: block;
  128.     }
  129.  
  130. </style>
  131. <div class="aListwrap">
  132.     <div class="aListInner">
  133.         <div class="aListBoxL">
  134.             <div class="aListBoxLIn diyP1">
  135.                 <div class="diyMadia">
  136.                     <img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg" />
  137.                 </div>
  138.  
  139.             </div>
  140.         </div>
  141.         <div class="aListBoxR">
  142.             <div class="aListBoxRIn diyP1">
  143.                 <div class="aLisItemCon">
  144.                     <div class="aLisItemTit">
  145.  
  146.                         <div class="diyRightTop">
  147.                             标题标题标题标题标题标题标题标题
  148.                             标题标题标题标题标题标题标题标题
  149.                             标题标题标题标题标题标题标题标题
  150.                         </div>
  151.  
  152.                     </div>
  153.                     <div class="aLisItemNote">
  154.                         <div class="aLisItemNoteIn">
  155.  
  156.                             <div class="diyRightMid table">
  157.                                 <div class="diyRightMidIn tablecell">
  158.                                     右中部右中部右中部右中部右中部右中部右中部右中部右中部右中部
  159.                                     右中部右中部右中部右中部右中部右中部右中部右中部右中部右中部
  160.                                     右中部右中部右中部右中部右中部右中部右中部右中部右中部右中部
  161.                                 </div>
  162.                             </div>
  163.  
  164.                         </div>
  165.  
  166.                     </div>
  167.                     <div class="aLisItemBot">
  168.  
  169.                         <div class="diyRightBottom">
  170.                             右下部右下部右下部右下部右下部右下部右下部右下部右下部
  171.                             右下部右下部右下部右下部右下部右下部右下部右下部右下部
  172.                             右下部右下部右下部右下部右下部右下部
  173.                         </div>
  174.  
  175.                     </div>
  176.  
  177.                 </div>
  178.  
  179.             </div>
  180.         </div>
  181.     </div>
  182.  
  183. </div>
  184.  
  185. </body>
  186. </html>

【纯css】左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度。支持不规则图片。的更多相关文章

  1. css实现左栏固定右栏自适应，高度自适应的布局

    收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...

  2. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  3. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  4. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  5. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  6. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  8. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  9. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

随机推荐

  1. memcache占用CPU过高的解决办法

    Simon最近为公司服务器操碎了心 , 先是mysqld进程占用CPU过高 , 导致服务器性能变低 ,网站打开太慢.通过增加max_connections及table_cache解决了问题 ,随后发现 ...

  2. POJ 2186 Popular Cows（Targin缩点）

    传送门 Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 31808   Accepted: 1292 ...

  3. Angularjs -Promise - $http

    https://www.peterbe.com/plog/promises-with-$http

  4. Hibernate Hql 总结(2)---laoyang

    package com.etc.test; import java.util.Iterator; import java.util.List; import org.hibernate.Query; ...

  5. chose.jquery 多选

    <select id="language" data-placeholder="选择类别..." class="chosen-select&qu ...

  6. 室内定位系列（二）——仿真获取RSS数据

    很多情况下大家都采用实际测量的数据进行定位算法的性能分析和验证,但是实际测量的工作量太大.数据不全面.灵活性较小,采用仿真的方法获取RSS数据是另一种可供选择的方式.本文介绍射线跟踪技术的基本原理,以 ...

  7. PHP中Exception异常

    异常的基本使用 当异常被抛出时,其后的代码不会继续执行,PHP 会尝试查找匹配的 "catch" 代码块. 如果异常没有被捕获,而且又没用使用 set_exception_hand ...

  8. 【Redis安装学习】

    1.Redis 中文官网地址:http://www.redis.net.cn/download/ 这里只是简单的安装了下.具体的官网有详细的介绍和安装:跳转 如何安装 下载,解压,编译: $ wget ...

  9. 使用 Weinre 调试移动网站及 PhoneGap 应用

    在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用.但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了.因此,移动开发人员都 ...

  10. Linux htop工具使用详解

    一．Htop的使用简介 大家可能对top监控软件比较熟悉,今天我为大家介绍另外一个监控软件Htop,姑且称之为top的增强版,相比top其有着很多自身的优势.如下: 两者相比起来,top比较繁琐 默认 ...