html 元素两端对齐中间自适应

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
</head>
 
<body>
<style>
*{margin:0;padding:0;border:none}
.recent_hot { overflow: hidden; zoom: 1; margin-bottom: 35px; font-size: 0; -webkit-text-size-adjust:none; }
    .recent_hot_film,.recent_hot_ebook { border: 1px solid #E2E2E2; background: #F6F6F6 url(http://img03.taobaocdn.com/tps/i3/T1XdOHXfduXXXXXXXX-1-14.gif) repeat-x; float: left; margin-right: 12px; width: 442px; padding: 25px; padding-bottom: 0; }
    .recent_hot_film .hd a,.recent_hot_ebook .hd a { float: right; font-size: 12px; color: #666; }
    .recent_hot_ebook { margin-right: 0; } 
    .recent_hot_film .hd,.recent_hot_ebook .hd { background: url(http://img04.taobaocdn.com/tps/i4/T1D5iMXaFgXXXXXXXX-143-50.png) no-repeat 0 0; height: 20px; }
    .recent_hot_ebook .hd { background-position: 0 -30px; }
    .recent_hot_film .bd,.recent_hot_ebook .bd { margin-top: 20px; }
    .hot_film_list,.hot_ebook_list { text-align: justify; text-justify: distribute-all-lines; overflow: hidden; zoom: 1; }
    .hot_film_list li,.hot_ebook_list li { display: inline-block; *display: inline; zoom: 1; width: 120px; vertical-align: top; margin-bottom: 30px; } 
    .hot_film_list:after,.hot_ebook_list:after { content: ''; display: inline-block; width: 100%; }
    .hot_film_list .title,.hot_ebook_list .title { margin-bottom: 6px;  text-align: center; margin-top: 10px; white-space: nowrap; text-overflow: ellipsis; }
    .hot_film_list .title a,.hot_ebook_list .title a { color: #333; font-size: 14px; float: none; }
    .hot_film_list .desc,.hot_ebook_list .desc { color: #666; font-size: 12px; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
    /*opera hack*/
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
        .hot_film_list,.hot_ebook_list { text-align: left; overflow: hidden; zoom: 1; }
        .hot_film_list li,.hot_ebook_list li { margin-right: 41px; }
        .recent_hot_film .last,.recent_hot_ebook .last { margin-right: 0; }
    }
</style>
<div class="recent_hot">
<!--近期热门电影-->
<div class="recent_hot_film">    
            <div class="hd">
 
                <a href="http://www.taohua.com/channel.htm?id=film" class="more">更多>></a>近期热门电影
            </div>
            <div class="bd">
                <ul class="hot_film_list">
                    <li>
                        <a href="http://item.taohua.com/item.htm?id=13615346403&prc=1"><img src="http://img04.taobaocdn.com/tps/i4/T1MM1LXbJtXXXXXXXX-120-160.png" alt=""/></a>
                        <p class="title"><a href="http://item.taohua.com/item.htm?id=13615346403&prc=1">鸿门宴传奇</a></p>
                        <p class="desc">千古传奇新演绎</p>
 
                    </li>
                    <li>
                        <a href="http://item.taohua.com/item.htm?id=14080316657"><img src="http://img02.taobaocdn.com/tps/i2/T1nnuLXg8iXXXXXXXX-120-160.gif" alt=""/></a>
                        <p class="title"><a href="http://item.taohua.com/item.htm?id=14080316657">哈利波特1—8全集</a></p>
                        <p class="desc">坐拥十年魔法奇缘</p>
                    </li>
                    <li class="last">
                        <a href="http://item.taohua.com/item.htm?id=13591350554&prc=1"><img src="http://img03.taobaocdn.com/tps/i3/T12heMXnVhXXXXXXXX-120-160.png" alt=""/></a>
 
                        <p class="title"><a href="http://item.taohua.com/item.htm?id=13591350554&prc=1">东成西就2011</a></p>
                        <p class="desc">爆笑喜剧经典延续</p>
                    </li>
                    <li>
                  <a href="http://item.taohua.com/item.htm?id=13523414011"><img src="http://img04.taobaocdn.com/imgextra/i4/737695153/T2gySiXgJXXXXXXXXX_!!737695153.jpg" alt=""/></a>
                  <p class="title"><a href="http://item.taohua.com/item.htm?id=13523414011">减肥美体肚皮舞:美腹篇</a></p>
                  <p class="desc">轻松甩掉游泳圈</p>
 
               </li>
               <li>
                  <a href="http://item.taohua.com/item.htm?id=14064028915"><img src="http://img03.taobaocdn.com/imgextra/i3/737695153/T2m4OiXahbXXXXXXXX_!!737695153.jpg" alt=""/></a>
                  <p class="title"><a href="http://item.taohua.com/item.htm?id=14064028915">10分钟瘦身普拉提</a></p>
                  <p class="desc">瘦腰又瘦腿!</p>
               </li>
               <li class="last">
                  <a href="http://www.taohua.com/auction/search-all-%25E9%259D%25A2%25E9%2583%25A8%25E4%25BF%259D%25E5%2585%25BB%25E6%2593%258D.htm"><img src="http://img01.taobaocdn.com/tps/i1/T1GZ9MXlVtXXXXXXXX-120-160.png" alt=""/></a>
 
                  <p class="title"><a href="http://www.taohua.com/auction/search-all-%25E9%259D%25A2%25E9%2583%25A8%25E4%25BF%259D%25E5%2585%25BB%25E6%2593%258D.htm">面部保养操</a></p>
                  <p class="desc">畅销NO1. 面部保养操</p>
               </li>
                </ul>
            </div>
        </div><!--近期热门电影END-->
<!--近期热门电子书-->
<div>
<s>hahahh</s>
</div>
 
 
</body>
</html>

  

posted @   kpbiao  阅读(1138)  评论(3编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示