属性浮动在CSS中的块显示不正确

Question

I have some problem with page-proofs. This is my style.css file:

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }
#category
 {
 padding:10px 10px 10px 20px;
 border-left: 1px solid #d9d9d9;
 border-right: 1px solid #d9d9d9;
 border-bottom: 1px solid #d9d9d9;
 width:200px;
 clear:both;
 display:block;
 }

 #category ul li{
 word-wrap: break-word;
 list-style-image: url(/neoshop/images/check.png);
 padding:10px 0px 10px 10px;
border-bottom:1px dotted #cccccc;
 }
 #category ul li:last-child{
border-bottom:0px dotted #cccccc;
 }

#category ul li a{
font:15px/1.3 "Arial", Arial,Helvetica, sans-serif;
 margin-top:0px;
 font-weight:100;
 display:block;
 color:#2f3638;
 text-decoration:none;
 line-height:20px;

 }

#category ul li a:hover{

 color:#0bb1e8;
 }

#category ul ul a{

list-style-image:none;
color:#8b8b8b;
background:#fff;
}

#category ul ul{
margin-top:5px;
display:none;
color:#8b8b8b;
background:#fff;
}

#category ul ul li{
 word-wrap: break-word;
 list-style-image: none;
 padding:10px 0px 10px 10px;
border-bottom:1px dotted #cccccc;
 }

.catalog
{
margin-left:12px;
float:left;
 width:948px;

}

.product-main
{
    width:236px;
    height:285px;
    float:left;
}

.product{
border-right:1px dotted #cccccc;
padding:0 15px;
}
    .product h2{
    color:#111017;
    text-align:center;
    font:bold 14px/1.3 Tahoma;
    margin:0 0 15px 0;
    }
    .product h3{
    color:#111017;

    text-align:center;
    font:bold 12px/1.3 Tahoma;
    margin:0 0 15px 0;
    }
    .product-img{

    text-align:center;  
    }

    .product-img img{   
    weight:114px;
    height:112px;   
    }

    .price{
    font:13px/1.3 "Arial", Arial,Helvetica, sans-serif;
    color:#0bb1e8;


    }

        .price span{
        font:13px/1.3 "Arial", Arial,Helvetica, sans-serif;
        color:#111017;
        text-align:center;

        }

        .price a{
        clear:both;
        float:right;    
        }
    .bot-dot
    {
    border-bottom:1px dotted #cccccc;
    margin:20px;
    }

.product-main:nth-child(4n) .product
{
border-right:none;
}
.product-main:last-child .product
{
border-right:none;
}
.product-main:nth-child(4n) .bot-dot
{
margin: 20px 0 20px 20px;
}
.product-main:nth-child(4n+1) .bot-dot
{
margin: 20px 20px 20px 0px;
}

If i used standart pictures and description (like picture 2) - i have good appearance of the site. But when I use the data from the database, the block catalog moves down the left and there is a large space between the first and second products.

{* products_list.tpl *}
{load_presentation_object filename="products_list" assign="obj"}
{* Начало списка товаров *}
<div class="catalog">
{if $obj->mrTotalPages > 1}
<p>
Page {$obj->mPage} of {$obj->mrTotalPages}
{if $obj->mLinkToPreviousPage}
<a href="{$obj->mLinkToPreviousPage}">Previous</a>
{else}
Previous
{/if}
{if $obj->mLinkToNextPage}
<a href="{$obj->mLinkToNextPage}">Next</a>
{else}
Next
{/if}
</p>
{/if}
{if $obj->mProducts}
    {section name=k loop=$obj->mProducts}


    <div class="product-main">
        <div class="product">

            <div class="product-img"><a href="{$obj->mProducts[k].link_to_product}">
                <img src="{$obj->mProducts[k].image}"
                alt="{$obj->mProducts[k].name}"/></a></div>
            <h2><a href="{$obj->mProducts[k].link_to_product}">{$obj->mProducts[k].name}</a></h2>
            <h3>{$obj->mProducts[k].description}</h3>
            <p class="price">{$obj->mProducts[k].price} <span>грн. </span><a href="#">ADD</a></p>
            </div>
    <p class="bot-dot"></p>
        </div>
    </div>
    {/section}
{/if}
{* Конец списка товаров *}

May be a problem with the code in this template, i don't know. Please, help me, it's my first project, so i can't understand where the problem.

Answer 1

You have an extra closing div in your code. This may be causing your problem.

You have:

<div class="product-main">
    <div class="product">

        <div class="product-img"><a href="{$obj->mProducts[k].link_to_product}">
            <img src="{$obj->mProducts[k].image}"
                 alt="{$obj->mProducts[k].name}"/></a>
       </div>
        <h2><a href="{$obj->mProducts[k].link_to_product}">{$obj->mProducts[k].name}</a></h2>

        <h3>{$obj->mProducts[k].description}</h3>

        <p class="price">{$obj->mProducts[k].price} <span>грн. </span><a href="#">ADD</a></p>
    </div>
    <p class="bot-dot"></p>
</div>
</div>

should be:

<div class="product-main">
    <div class="product">

        <div class="product-img"><a href="{$obj->mProducts[k].link_to_product}">
            <img src="{$obj->mProducts[k].image}"
                 alt="{$obj->mProducts[k].name}"/></a>
        </div>
        <h2><a href="{$obj->mProducts[k].link_to_product}">{$obj->mProducts[k].name}</a></h2>

        <h3>{$obj->mProducts[k].description}</h3>

        <p class="price">{$obj->mProducts[k].price} <span>грн. </span><a href="#">ADD</a></p>
    </div>
    <p class="bot-dot"></p>
</div>