列表两列布局 display:table-cell; *display:inline-block;

absolute绝对定位的非绝对定位用法,头像固定的,右侧自使用布局

<ul>

  <li>
    <div class="picbox"> <a href="#"><img class="head_imgpad" title="徐若瑄VIVIAN" src="http://tp3.sinaimg.cn/1260194414/50/1283203849/0"></a> </div>
    <div class="content">
      我堆满零碎破败的意象, 在译文中捏造你的容颜。 或生或灭· 一笔带过瑟缩,一句写完执着。 等季节敲打丁零的飘落; 叶是寂静的秋脱离忧思, 花于树的种子滴落咫尺。 你于我异度...
    </div>
  </li>
  <li>
    <div class="picbox"> <a href="#"><img class="head_imgpad" title="徐若瑄VIVIAN" src="http://tp3.sinaimg.cn/1260194414/50/1283203849/0"></a> </div>
    <div class="content">
      我堆满零碎破败的意象, 在译文中捏造你的容颜。 或生或灭· 一笔带过瑟缩,一句写完执着。 等季节敲打丁零的飘落; 叶是寂静的秋脱离忧思, 花于树的种子滴落咫尺。 你于我异度...
    </div>
  </li>
</ul>
<style type="text/css">
ul{margin:20px; background-color:#F33;padding:18px;}
ul li{ list-style:none;margin:15px 0; background:rgba(0,0,0,.2);border-radius:8px; padding:10px 50px; position:relative;min-height:80px;}
ul li .picbox{ position:absolute;left:-15px;top:10px;}
ul li .picbox img{border-radius:50%;}
.pl76{padding-left:70px;}

</style>


display:table-cell实现兼容性的两栏自适应布局

<div class="box f9 fix">
    <a href="#prettyGirl" class="picbox"><img border="0" src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" width="100%"/></a>
    <div class="content">
        <p><a href="#prettyGirl">大美女一枚</a> 来自上海</p>
        <p class="mt5">签名:想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>
        <p class="mt5">微博:坐在办公室,只听轰隆隆几声巨响,晴天也能打雷吗?原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了,也不清下场,把路过的汽车震得灰头土脸,愣在路中央不知如何是好。其次,房子只炸了一半,另一半屹立不倒,是乍药太水还是房子质量太好?</p>
    </div>
</div>
<div class="box f9 fix">
    <a href="#prettyGirl" class="picbox"><img border="0" src="http://img.ivsky.com/img/tupian/co/201612/06/kuaile_de_ertong-005.jpg" width="100%" /></a>
    <div class="content">
        <p><a href="#prettyGirl">大美女一枚</a> 来自上海</p>
        <p class="mt5">签名:想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>
        <p class="mt5">微博:坐在办公室,只听轰隆隆几声巨响,晴天也能打雷吗?原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了,也不清下场,把路过的汽车震得灰头土脸,愣在路中央不知如何是好。其次,房子只炸了一半,另一半屹立不倒,是乍药太水还是房子质量太好?</p>
    </div>
</div>

<style type="text/css">
.box{width:90%; margin:60px auto 0; padding:20px; background:#f5f5f5;}
.picbox{float:left;margin-right:10px}
.content{display:table-cell; *display:inline-block;}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值