div容器产品不包括其他divs谁是子女

Question

具体而言，这是一个HTML和CSS问题。

/* Pocetak #container-product */ 
 
#container-product{ 
 
\t padding:0 10px; 
 
} 
 

 
.kategorije{ 
 
\t margin-bottom:10px; 
 
\t padding:0; 
 
} 
 

 
.kategorije h2{ 
 
\t text-align:center; 
 
\t text-decoration:underline; 
 
\t font-style:italic; 
 
} 
 
/* Pocetak #sidemenu */ 
 

 
h3{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t font-size:17px; 
 
\t font-weight:bold; 
 
} 
 

 
#sidemenu{ 
 
\t float:left; 
 
\t width:240px; 
 
} 
 

 
#sidemenu-kategorije{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t font-size:15px; 
 
\t font-weight:bold; 
 
} 
 

 
#sidemenu-kategorije ul{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t list-style:none; 
 
} 
 

 
#sidemenu-kategorije li{ 
 
\t margin:0; 
 
\t padding-bottom:10px; 
 
} 
 

 
#sidemenu-kategorije li a{ 
 
\t text-decoration:none; 
 
\t color:#0A13B8; 
 
} 
 

 
#sidemenu-kategorije li a:hover{ 
 
\t font-size:20px; 
 
\t text-decoration:underline; 
 
\t color:#000000; 
 
} 
 

 
/* Kraj #sidemenu */ 
 
/* Pocetak #content */ 
 
#content{ 
 
\t float:right; 
 
\t width:690px; 
 
\t padding:0; 
 
} 
 

 
.product1, .product2, .product3{ 
 
\t float:left; 
 
\t width:165px; 
 
\t margin:0; 
 
\t padding:0 5px; 
 
} 
 

 
.product4{ 
 
\t float:right; 
 
\t width:165px; 
 
\t margin:0; 
 
} 
 

 
.product-img{ 
 
\t float:left; 
 
\t display:block; 
 
\t text-align:center; 
 
\t overflow:hidden; 
 
} 
 

 
.product-grupa{ 
 
\t /*border:1px solid;*/ 
 
\t padding:0 10px; 
 
\t text-align:center 
 
} 
 

 
.product-grupa a{ 
 
\t text-decoration:none; \t 
 
\t color:#0A13B8; 
 
} 
 

 
.product-grupa a:hover{ 
 
\t text-decoration:underline; 
 
\t color:#000000; 
 
} 
 

 
.clear{ 
 
\t clear: both; 
 
\t width: 100%; 
 
\t height: 15px; 
 
\t overflow: hidden; 
 
} 
 

 
/* Kraj #content */ 
 
/* Kraj #container-product */

<div id="container-product"> <!-- Pocetak #container-product --> 
 
    \t <div class="kategorije"> 
 
     \t <h2>KATEGORIJE PROIZVODA</h2> 
 
     </div> 
 
\t \t 
 
    \t <div id="sidemenu"><!-- Pocetak #sidemenu --> 
 
     \t <div id="sidemenu-kategorije"> 
 
      \t <ul> 
 
       \t <li><a href="#"><h3>RASVETA</h3></a></li> 
 
        <li><a href="#"><h3>LED RASVETA</h3></a></li> 
 
        <li><a href="#"><h3>KANALICE</h3></a></li> 
 
        <li><a href="#"><h3>OSIGURACI</h3></a></li> 
 
        <li><a href="#"><h3>MERNI INSTRUMENTI</h3></a></li> 
 
        <li><a href="#"><h3>GALANTERIJA</h3></a></li> 
 
        <li><a href="#"><h3>KLEME</h3></a></li> 
 
        <li><a href="#"><h3>DELOVI ZA VEŠ MAŠINE</h3></a></li> 
 
        <li><a href="#"><h3>DELOVI ZA BOJLERE</h3></a></li> 
 
        <li><a href="#"><h3>VENTILATORI</h3></a></li> 
 
       </ul> 
 
      </div> 
 
    \t </div><!-- Kraj #sidemenu --> 
 
\t \t 
 
    \t <div id="content"><!-- Pocetak #content --> 
 
\t \t 
 
\t \t \t <div class="product1"><!-- Pocetak .product1 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t <img src="#" width="165" height="165"/> 
 
       </a> 
 
       <h3 class="product-grupa"><a href="#">RASVETA</a></h3> \t \t 
 
     \t </div><!-- Kraj .product1 --> 
 
      
 
     \t \t <div class="product2"><!-- Pocetak .product2 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t \t <img src="#" width="165" height="165"/> 
 
      \t </a> 
 
      \t <h3 class="product-grupa"><a href="#">LED RASVETA</a></h3> \t \t 
 
     \t \t </div><!-- Kraj .product2 --> 
 
      
 
     \t \t <div class="product3"><!-- Pocetak .product3 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
     \t   \t <img src="#" width="165" height="165"/> 
 
     \t  </a> 
 
    \t   \t <h3 class="product-grupa"><a href="#">KANALICE</a></h3> \t \t 
 
\t   </div><!-- Kraj .product3 --> 
 
     \t   
 
     \t <div class="product4"><!-- Pocetak .product4 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t \t <img src="#" width="165" height="165"/> 
 
\t    </a> 
 
    \t   \t <h3 class="product-grupa"><a href="#">OSIGURAČI</a></h3> \t \t 
 
    \t  </div><!-- Kraj .product4 --> 
 
      
 
    \t  <div class="clear"></div> 
 
     
 
    \t  \t <div class="product1"><!-- Pocetak .product1 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
      \t  \t <img src="#" width="165" height="165"/> 
 
     \t \t \t </a> 
 
      \t <h3 class="product-grupa"><a href="#">MERNI INSTRUMENTI</a></h3> 
 
     \t </div><!-- Kraj .product1 --> 
 
      
 
     \t <div class="product2"><!-- Pocetak .product2 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t \t <img src="#" width="165" height="165"/> 
 
      \t </a> 
 
      <h3 class="product-grupa"><a href="#">GALANTERIJA</a></h3> \t \t 
 
     \t </div><!-- Kraj .product2 --> 
 
      
 
     \t <div class="product3"><!-- Pocetak .product3 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t \t <img src="#" width="165" height="165"/> 
 
      \t </a> 
 
       \t <h3 class="product-grupa"><a href="#">KLEME</a></h3> \t \t 
 
     \t </div><!-- Kraj .product3 --> 
 
       
 
     \t <div class="product4"><!-- Pocetak .product4 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t \t <img src="#" width="165" height="165"/> 
 
      \t </a> 
 
       \t <h3 class="product-grupa"><a href="#">DELOVI ZA VEŠ MAŠINE</a></h3> 
 
     \t </div><!-- Kraj .product4 --> 
 
     
 
     \t <div class="clear"></div> 
 
      
 
      <div class="product1"><!-- Pocetak .product1 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t <img src="#" width="165" height="165"/> 
 
       </a> 
 
       <h3 class="product-grupa"><a href="#">DELOVI ZA BOJLERE</a></h3> \t 
 
     \t </div><!-- Kraj .product1 --> 
 
      
 
     \t \t <div class="product2"><!-- Pocetak .product2 --> 
 
\t \t \t \t <a class="product-img" href="#"> 
 
       \t \t <img src="#" width="165" height="165"/> 
 
      \t </a> 
 
      \t <h3 class="product-grupa"><a href="#">VENTILATORI</a></h3> \t \t 
 
     \t \t </div><!-- Kraj .product2 --> 
 
       
 
      <div class="clear"></div> 
 
       
 
     </div><!-- Kraj #content --> 
 
    </div> <!-- Kraj #container-product -->

我有一个问题，这个div container-product不包含的孩子，我会附上图片有问题的。 问题是，我犯了一个错误？

Answer 1

，因为你正在使用float需要清除的元素，在这种情况下，父亲。

.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
/* Pocetak #container-product */ 
 

 
#container-product { 
 
    padding: 0 10px; 
 
} 
 
.kategorije { 
 
    margin-bottom: 10px; 
 
    padding: 0; 
 
} 
 
.kategorije h2 { 
 
    text-align: center; 
 
    text-decoration: underline; 
 
    font-style: italic; 
 
} 
 
/* Pocetak #sidemenu */ 
 

 
h3 { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
} 
 
#sidemenu { 
 
    float: left; 
 
    width: 240px; 
 
} 
 
#sidemenu-kategorije { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
} 
 
#sidemenu-kategorije ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
#sidemenu-kategorije li { 
 
    margin: 0; 
 
    padding-bottom: 10px; 
 
} 
 
#sidemenu-kategorije li a { 
 
    text-decoration: none; 
 
    color: #0A13B8; 
 
} 
 
#sidemenu-kategorije li a:hover { 
 
    font-size: 20px; 
 
    text-decoration: underline; 
 
    color: #000000; 
 
} 
 
/* Kraj #sidemenu */ 
 

 
/* Pocetak #content */ 
 

 
#content { 
 
    float: right; 
 
    width: 690px; 
 
    padding: 0; 
 
} 
 
.product1, 
 
.product2, 
 
.product3 { 
 
    float: left; 
 
    width: 165px; 
 
    margin: 0; 
 
    padding: 0 5px; 
 
} 
 
.product4 { 
 
    float: right; 
 
    width: 165px; 
 
    margin: 0; 
 
} 
 
.product-img { 
 
    float: left; 
 
    display: block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
.product-grupa { 
 
    /*border:1px solid;*/ 
 
    padding: 0 10px; 
 
    text-align: center 
 
} 
 
.product-grupa a { 
 
    text-decoration: none; 
 
    color: #0A13B8; 
 
} 
 
.product-grupa a:hover { 
 
    text-decoration: underline; 
 
    color: #000000; 
 
} 
 
.clear { 
 
    clear: both; 
 
    width: 100%; 
 
    height: 15px; 
 
    overflow: hidden; 
 
} 
 
/* Kraj #content */ 
 

 
/* Kraj #container-product */

<div id="container-product" class="clearfix"> 
 
    <!-- Pocetak #container-product --> 
 
    <div class="kategorije"> 
 
    <h2>KATEGORIJE PROIZVODA</h2> 
 
    </div> 
 

 
    <div id="sidemenu"> 
 
    <!-- Pocetak #sidemenu --> 
 
    <div id="sidemenu-kategorije"> 
 
     <ul> 
 
     <li><a href="#"><h3>RASVETA</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>LED RASVETA</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>KANALICE</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>OSIGURACI</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>MERNI INSTRUMENTI</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>GALANTERIJA</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>KLEME</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>DELOVI ZA VEŠ MAŠINE</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>DELOVI ZA BOJLERE</h3></a> 
 
     </li> 
 
     <li><a href="#"><h3>VENTILATORI</h3></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <!-- Kraj #sidemenu --> 
 

 
    <div id="content"> 
 
    <!-- Pocetak #content --> 
 

 
    <div class="product1"> 
 
     <!-- Pocetak .product1 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">RASVETA</a></h3> 
 
    </div> 
 
    <!-- Kraj .product1 --> 
 

 
    <div class="product2"> 
 
     <!-- Pocetak .product2 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">LED RASVETA</a></h3> 
 
    </div> 
 
    <!-- Kraj .product2 --> 
 

 
    <div class="product3"> 
 
     <!-- Pocetak .product3 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">KANALICE</a></h3> 
 
    </div> 
 
    <!-- Kraj .product3 --> 
 

 
    <div class="product4"> 
 
     <!-- Pocetak .product4 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">OSIGURAČI</a></h3> 
 
    </div> 
 
    <!-- Kraj .product4 --> 
 

 
    <div class="clear"></div> 
 

 
    <div class="product1"> 
 
     <!-- Pocetak .product1 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">MERNI INSTRUMENTI</a></h3> 
 
    </div> 
 
    <!-- Kraj .product1 --> 
 

 
    <div class="product2"> 
 
     <!-- Pocetak .product2 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">GALANTERIJA</a></h3> 
 
    </div> 
 
    <!-- Kraj .product2 --> 
 

 
    <div class="product3"> 
 
     <!-- Pocetak .product3 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">KLEME</a></h3> 
 
    </div> 
 
    <!-- Kraj .product3 --> 
 

 
    <div class="product4"> 
 
     <!-- Pocetak .product4 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">DELOVI ZA VEŠ MAŠINE</a></h3> 
 
    </div> 
 
    <!-- Kraj .product4 --> 
 

 
    <div class="clear"></div> 
 

 
    <div class="product1"> 
 
     <!-- Pocetak .product1 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">DELOVI ZA BOJLERE</a></h3> 
 
    </div> 
 
    <!-- Kraj .product1 --> 
 

 
    <div class="product2"> 
 
     <!-- Pocetak .product2 --> 
 
     <a class="product-img" href="#"> 
 
     <img src="#" width="165" height="165" /> 
 
     </a> 
 
     <h3 class="product-grupa"><a href="#">VENTILATORI</a></h3> 
 
    </div> 
 
    <!-- Kraj .product2 --> 
 

 
    <div class="clear"></div> 
 

 
    </div> 
 
    <!-- Kraj #content --> 
 
</div> 
 
<!-- Kraj #container-product -->