布局麻烦/ float：left [英] trouble with layout/float:left

问题描述

我刚刚提出这个问题「
，代码如下：

HTML（重复8次）：

 code>< div class ='image'>< / div> 
< div class ='line1'>< / div> 
< div class ='head'>< / div> 
< div class ='subBox'> 
< div class ='sub'>< / div> 
< div class ='price'>< / div> 
< div class ='button'>< / div> 
< / div> 
< div style ='clear：both;'>< / div> 
< div class ='line2'>< / div> 
< div class ='placeholder'>< / div> 
  

CSS：

 code> .headerimage {
 background-color：＃000; 
 height：273px; 
 left：0; 
 position：absolute; 
 right：0; 
} 
 .box1 {
 position：relative; 
 top：273px; 
} 
 .produkt {
 float：left; 
 height：318px; 
 position：relative; 
 width：224px; 
} 
 .image {
 background-color：#afeeee; 
 height：230px; 
 position：relative; 
 width：224px; 
} 
 .line1 {
 background-color：＃000; 
 height：1px; 
 position：relative; 
 width：224px; 
} 
 .head {
 background-color：#eee; 
 height：25px; 
 position：relative; 
 width：224px; 
} 
 .subBox {
 height：50px; 
 position：relative; 
 width：224px; 
} 
 .sub {
 height：25px; 
 position：relative; 
 width：224px; 
} 
 .price {
 background-color：＃847077; 
 float：left; 
 height：20px; 
 position：relative; 
 width：160px; 
} 
 .button {
 background-color：＃6A5ACD; 
 float：left; 
 height：20px; 
 position：relative; 
 width：58px; 
} 
 .line2 {
 background-color：＃000; 
 height：5px; 
 padding-bottom：20px; 
 position：relative; 
 width：224px; 
} 
 .placeholder {
 height：800px; 
 width：800px; 
 position：relative; 
 padding-top：1000px; 
} 
  

解决方案

1. 删除 .placehodler CSS样式




2. 将每个元素封装在 div




3. 将封装的 div 设置为 float：left ，并且表现为 display：inline-block div




4. 查看此 jsFiddle

   
   

   I just asked this question 'trouble with unwanted space between divs'

   Now I have a new problem…for my layout, I need to multiply this box 8 times like this:

   It worked before, but now (after I erased the height) I get this:

   Here's a fiddle: http://jsfiddle.net/m5t6e/ and here's the code:

   HTML (repeats 8 times) :

   <div class='image'></div>
   <div class='line1'></div>
   <div class='head'></div>
   <div class='subBox'>
       <div class='sub'></div>
       <div class='price'></div>
       <div class='button'></div>
   </div>
   <div style='clear:both;'></div>
   <div class='line2'></div>
   <div class='placeholder'></div>
   

   CSS:

   .headerimage {
       background-color:#000;
       height:273px;
       left:0;
       position:absolute;
       right:0;
   }
   .box1 {
       position:relative;
       top:273px;
   }
   .produkt {
       float:left;
       height:318px;
       position:relative;
       width:224px;
   }
   .image {
       background-color:#afeeee;
       height:230px;
       position:relative;
       width:224px;
   }
   .line1 {
       background-color:#000;
       height:1px;
       position:relative;
       width:224px;
   }
   .head {
       background-color:#eee;
       height:25px;
       position:relative;
       width:224px;
   }
   .subBox {
       height:50px;
       position:relative;
       width:224px;
   }
   .sub {
       height:25px;
       position:relative;
       width:224px;
   }
   .price {
       background-color:#847077;
       float:left;
       height:20px;
       position:relative;
       width:160px;
   }
   .button {
       background-color:#6A5ACD;
       float:left;
       height:20px;
       position:relative;
       width:58px;
   }
   .line2 {
       background-color:#000;
       height:5px;
       padding-bottom:20px;
       position:relative;
       width:224px;
   }
   .placeholder{
       height:800px;
       width:800px;
       position:relative;
       padding-top:1000px;
   }
   

   解决方案

   1. Remove .placehodler CSS style

   2. Encapsulate each element in a div

   3. Set encapsulated div to float:left and behave like display:inline-block div

   4. insert a <br> after each 4 blocks

   Check this jsFiddle

   这篇关于布局麻烦/ float：left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！