zoukankan      html  css  js  c++  java
  • 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;  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;  120px; vertical-align: top; margin-bottom: 30px; }	
    	.hot_film_list:after,.hot_ebook_list:after { content: ''; display: inline-block;  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>
    

      

  • 相关阅读:
    spring boot中 使用http请求
    spring boot 多层级mapper
    spring boot 使用拦截器,注解 实现 权限过滤
    spring boot 集成mybatis报错
    spring boot 使用拦截器 实现 用户登录拦截
    mac eclipse 删除不用的workspace
    maven+eclipse+mac+tomcat 多模块发布
    启动spring boot 异常
    安装 redis [standlone模式]
    quartz项目中的运用
  • 原文地址:https://www.cnblogs.com/jinbiao/p/2353873.html
Copyright © 2011-2022 走看看