div container-product不包括其他孩子的div

时间:2016-06-12 20:43:27

标签: html css

具体来说,这是一个HTML和CSS问题。

/* 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"> <!-- 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 -->

我对这个不包含孩子的div container-product有问题,我会附上问题图片。 问题是,我犯了哪个错误?

SS

1 个答案:

答案 0 :(得分:0)

因为你正在使用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 -->