具体来说,这是一个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
有问题,我会附上问题图片。
问题是,我犯了哪个错误?
答案 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 -->