论坛

标题: 用div和用img写出来的效果不一样 [打印本页]

---

作者: 酒酿小顽童    时间: 2017-12-19 16:33
标题: 用div和用img写出来的效果不一样

1. 
   
2. <div style="width:985px; height:710px;">
   
3. 
   
4.         <div style="width:315px; height:710px; float:left">
   
5.                 <div class="footer-more" style="width:315px; height:230px; padding:0; background:url(https://img.alicdn.com/imgextra/i1/2273183720/TB2qxyydXHM8KJjSZFwXXcibXXa_!!2273183720.jpg); margin-bottom:20px;">
   
6.                         <a href="#" target="_blank">
   
7.                 <div class="footer-more-panel" style="width:315px; height:230px; padding:0; border:none; bottom:0; right:0; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2GwWQi4rI8KJjy0FpXXb5hVXa_!!2273183720.jpg)"></div>
   
8.                 </a>
   
9.                 </div>   
   
10.             <div class="footer-more" style=" padding:0; width:315px; height:460px; background:url(https://img.alicdn.com/imgextra/i2/2273183720/TB2Wwfdi3DD8KJjy0FdXXcjvXXa_!!2273183720.jpg)>
    
11.                         <a href="#" target="_blank">
    
12.             <div class="footer-more-panel" style="width:315px; height:460px; padding:0; border:none; bottom:0; right:0; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2bBqBdfjM8KJjSZFsXXXdZpXa_!!2273183720.jpg)"></div>
    
13.                  </a>
    
14.             </div>
    
15.         </div>
    
16. 
    
17.      <div style="width:315px; height:710px; float:left; margin:0 20px">
    
18. 
    
19.             <div class="footer-more" style=" padding:0; width:315px; height:460px; margin-bottom:20px; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2dDigi4TI8KJjSspiXXbM4FXa_!!2273183720.jpg)">
    
20.                         <a href="#" target="_blank">
    
21.             <div class="footer-more-panel" style="width:315px; height:460px; padding:0; border:none; bottom:0; right:0; background:url(https://img.alicdn.com/imgextra/i1/2273183720/TB2h_iti_nI8KJjSszgXXc8ApXa_!!2273183720.jpg)"></div>
    
22.                  </a>
    
23.             </div>        
    
24.         <div class="footer-more" style=" width:315px; height:230px; padding:0; background:url(https://img.alicdn.com/imgextra/i1/2273183720/TB2qxyydXHM8KJjSZFwXXcibXXa_!!2273183720.jpg)">
    
25.                        <a href="#" target="_blank">
    
26.                         <div class="footer-more-panel" style="width:315px; height:230px; padding:0; border:none; bottom:0; right:0; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2GwWQi4rI8KJjy0FpXXb5hVXa_!!2273183720.jpg)"></div>
    
27.             </a>
    
28.         </div>
    
29.         </div>
    
30. 
    
31.     <div style="width:315px; height:710px; float:left;">
    
32.             <div class="footer-more" style=" padding:0; width:315px; height:460px; margin-bottom:20px; background:url(https://img.alicdn.com/imgextra/i2/2273183720/TB2nV9ViZnI8KJjSsziXXb8QpXa_!!2273183720.jpg)">
    
33.                         <a href="#" target="_blank">
    
34.             <div class="footer-more-panel" style="width:315px; padding:0; border:none; bottom:0; right:0; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2S89Oi3LD8KJjSszeXXaGRpXa_!!2273183720.jpg)"></div>
    
35.                  </a>
    
36.             </div>   
    
37.             <div class="footer-more" style="width:315px; height:230px; padding:0; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2NnOUi8DH8KJjy1zeXXXjepXa_!!2273183720.jpg);">
    
38.                         <a href="#" target="_blank">
    
39.                 <div class="footer-more-panel" style="width:315px;  padding:0; border:none; top:0; right:0; background:url(https://img.alicdn.com/imgextra/i4/2273183720/TB2kpSRddHO8KJjSZFHXXbWJFXa_!!2273183720.jpg)"></div>
    
40.                 </a>
    
41.                 </div>
    
42.         </div>
    
43.    
    
44. </div>

复制代码

这个代码是div的，老师你帮我看看哪里错了

---

作者: 潜意式    时间: 2017-12-19 17:37
由于是要突破950px像素的宽度的，装修之前是否有在在线生成工具中过一遍，加上突破950px的代码呢？如果没有加上，就会出现这种错位的排列效果哦。

---

作者: 酒酿小顽童    时间: 2017-12-19 19:43

潜意式 发表于 2017-12-19 17:37
由于是要突破950px像素的宽度的，装修之前是否有在在线生成工具中过一遍，加上突破950px的代码呢？如果没有 ...

加了通栏的代码之后变成竖着的了，用img写的那个还是正常的。这是怎么回事呀

---

欢迎光临 论坛 (http://bbs.qinxue.com/)

Powered by Discuz! X3.1