在 css 中带有 属性 浮动的方块显示不正确
Incorrect display of the blocks with the property float in css
我的页面校样有问题。
这是我的 style.css 文件:
#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;
}
如果我使用标准图片和描述(如图片 2)- 我的网站外观不错。但是当我使用数据库中的数据时,块 catalog 向左下移并且在第一个和第二个产品之间有一个很大的 space。
{* 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}
{* Конец списка товаров *}
可能是这个模板中的代码有问题,我不知道。
请帮助我,这是我的第一个项目,所以我不明白问题出在哪里。
您的代码中有一个额外的结尾 div。这可能是您遇到问题的原因。
你有:
<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>
应该是:
<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>
我的页面校样有问题。 这是我的 style.css 文件:
#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;
}
如果我使用标准图片和描述(如图片 2)- 我的网站外观不错。但是当我使用数据库中的数据时,块 catalog 向左下移并且在第一个和第二个产品之间有一个很大的 space。
{* 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}
{* Конец списка товаров *}
可能是这个模板中的代码有问题,我不知道。 请帮助我,这是我的第一个项目,所以我不明白问题出在哪里。
您的代码中有一个额外的结尾 div。这可能是您遇到问题的原因。
你有:
<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>
应该是:
<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>