1
我不確定這是否足夠的信息，請讓我知道，如果你需要更多。我很缺乏經驗，所以不確定什麼是必要的。網頁不打包
我有一個部分顯示在各種網頁上。出於某種原因，它不包裝...圖像和相應的文本區域只是保持跑離頁面。
這裏是HTML。我遇到麻煩的地方就在這裏，Block NewProducts，id：「HomeNewProducts」。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HEAD GOES HERE -->
<body>
<div id="Container">
<div><img src="http://www.somethingorother.com" /> LoadingPleaseWait
</div>
<div id="Outer">
<div id="TopMenu">
<ul>
<li>
<div class="phoneIcon">CALL US</div>
</li>
<li>Some line of other</li>
<li class="last CartLink" style="display:HideCartOptions">
<a href="some url or other" title="View This"><i class="icon" title="View Cart"> </i><span>Items/$0.00</span></a>
</li>
</ul>
<br class="Clear">
</div>
<div id="Header" class="clearfix">
<div id="Logo">
HeaderLogoGoesHere
</div>
<div class="right">
<div id="SearchForm">
<form action=".../search.php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query">Search</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox" value="Search" />
<input type="submit" class="Button" value="" name="Search" title="Search" />
</form>
</div>
<script type="text/javascript">
var QuickSearchAlignment = 'right';
var QuickSearchWidth = '390px';
lang.EmptySmallSearch = "EmptySmallSearch";
</script>
</div>
</div>
<div id="Wrapper">
<div class="Left fleft" id="LayoutColumn1">
<div class="CategoryList" id="SideCategoryList">
<div class="BlockContent">
<div class="SideCategoryListClass">
<li class="LastChildClass"><a href="CategoryLink">CategoryName</a>
</li>
</div>
</div>
</div>
</div>
<div class="Content Wide" id="LayoutColumn2">
<script type="text/javascript" src=".../javascript/jquery/plugins/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.slide-show').flexslider({
slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: true
});
});
</script>
<div class="slide-show slide-show-render slide-show-render-full" id="HomeSlideShow">
<ol class="slides">
<li class="slide" xmlns="http://www.w3.org/1999/html">
<a href="Slide_Link_Url">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #000">Slide_Heading_Text</h2>
<p class="slide-text" style="color: #000">Slide_Text_Text</p>
<p class="slide-button" style="Slide_Button_Hide"><span style="color: #000">Slide_Button_Text</span></p>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="Slide_Image_Url" alt="Slide_Image_AlternateText">
</span>
</div>
</a>
</li>
</ol>
</div>
<hr style="width: 114%;">
<div class="Block NewProducts Moveable Panel" id="HomeNewProducts" style="display:HideHomeNewProductsPanel">
<div class="BlockContent">
<ul class="ProductList">
<li class="AlternateClass">
<div class="ProductImage" data-product="ProductId">
<img src="http://www.somethingorother.com" />
</div>
<div class="ProductDetails">
<a href="Product_Link" class="pname">ProductName</a>
<em class="p-price">ProductPrice</em>
<div class="ProductPriceRating">
<span class="Rating Rating4"><img src=".../ProductRating.png" alt="" /></span>
</div>
<div class="ProductActionAdd" style="display: HideActionAdd;">
<a href="ProductURL" class="btn icon-ProductAddText " title=" ProductAddText "> ProductAddText</a>
</div>
</div>
</li>%
</ul>
<br class="Clear" />
</div>
<br class="Clear" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
CSS：
/* Product Listings */
.ProductList, .ProductList li {
horizontal-align: center;
list-style: none;
padding: 0px;
margin: 0;
}
.Content .ProductList, .Content .ProductList li {
}
.ProductList li {
list-style: none;
min-height: 250px;
width: 260px !important;
display: table-cell;
font-size: 1em;
/*margin-right: -1px;*/
padding-bottom: 1px;
overflow: hidden;
}
#home .Content ul.ProductList li {
width: 260px !important;
}
.ProductList .ProductPriceRating {
padding-bottom: 0px;
}
.ProductList .ProductImage,
.brand-img {
padding: 0px;
text-align: center;
overflow: hidden;
vertical-align: middle;
/* border: 1px solid #d4d3d3; */
}
.ProductList .ProductImage img {
vertical-align: bottom;
max-width: 270px;
你有一個例子嗎？很難找到沒有HTML的東西。 – vernak2539
我認爲你需要發佈與此相關的HTML。 – 2013-10-11 01:08:57
我已編輯帖子以包含對應於我的CSS的HTML。謝謝！！ – Zipotontic