1

我不确定这是否足够的信息，如果您需要更多信息，请告诉我。我非常缺乏经验，所以不确定什么是必要的。

我有一个部分显示在各种网页上。出于某种原因，它没有换行......图像和相应的文本区域都只是不断地从页面上消失。

这是HTML。我遇到麻烦的地方就在下面<hr style=" width: 114%;">，Block NewProducts，id：“HomeNewProducts”。

/* 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;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HEAD GOES HERE -->

<body>
  <div id="Container">
    <div><img src="http://www.somethingorother.com" />&nbsp; 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">&nbsp;</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>

4

1 回答 1

0

终于弄清楚了....只是我的包装器和容器尺寸不正常的问题。调整了尺寸，现在一切都完美排列了。

于 2013-10-16T12:09:34.510 回答