如何防止邊欄移動到中間？

我有一個側邊欄，其中包含產品類別列表，並在主體中創建了一個重複區域，以根據點擊的類別顯示這些產品。如果我選擇一個空的類別，設計保持不變，但是當我選擇一個包含產品的類別時，側邊欄會進入頁面的中間，甚至頁腳也會變小。如何防止邊欄移動到中間？

在創建重複區域之前，我沒有側邊欄的問題，它沒有移動或任何東西。我創建了一個有頁面& css文件的小提琴。請讓我知道，如果我錯過了什麼，因爲我以前沒有用過小提琴。謝謝。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" href="IndexStyle.css"/> 
    <meta name="viewport" content="width= device-width, intial-scale=1.0"> 
</head> 
<body class="body"> 
    <header class="MainHeader"> 
    <img src="images/header-image-5.jpg"> 
    <nav><ul> 
     <li class="active"><a href="index.php">Home</a></li> 
     <li><a href="Product.php">Products</a></li> 
     <li><a href="AboutUs.php">About Us</a></li> 
     <li><a href="ContactUs.php">Contact Us</a></li> 
     </ul> 
    </nav> 
    </header> 
    <div class="MainBody"> 
    <h1>Products 
     </h1> 
     <div class="productsresult"> 
<?php if ($totalRows_ProductsData > 0) { // Show if recordset not empty ?> 
<?php do { ?> 
    <div class="products"> <p><?php echo $row_ProductsData['product_name']; ?> 
     <?php echo $row_ProductsData['price']; ?> 
     <?php echo $row_ProductsData['image']; ?></p> 
     <?php } while ($row_ProductsData = mysql_fetch_assoc($ProductsData)); ?> 
    </div> 
<?php } // Show if recordset not empty ?> 
<?php if ($totalRows_ProductsData == 0) { // Show if recordset empty ?> 
    There are no products in this category! 
    <?php } // Show if recordset empty ?> 
    </div> 
    </div> 
    <aside class="SideBar"> 
<?php include ("/includes/catalogue.php"); ?> 
    </aside> 
    <Footer class="Footer"> 
     <p>Copyrights reserved 
     </p> 

    </Footer> 
</body> 
</html>

來源

2017-05-03 ItssMohammed

如果你把側邊欄放在一邊標籤標題標籤下上面的「 MainBody「class – blecaf

@blecaf它使頁面佈局變得更糟。 – ItssMohammed

jsfiddle不能像其他人的照片中顯示的那樣工作嗎？我無法看到所描述的問題。 – Goose

在你的代碼檢查此條件if ($totalRows_ProductsData > 0) {

但你沒有正確關閉標籤。這是你的代碼生成HTML：

<div class="productsresult"> 
    <div class="products"><p>.....</p> 
     <div class="products"><p>.....</p> 
      <div class="products"><p>.....</p> 
</div> 
<aside class="SideBar"></aside>

注意不要關閉您的div的while循環內，因此它生成無效HTML結構，並把aside元素導致由非封閉div標籤內循環。

瀏覽器的「修復」這個未關閉的標籤自動閉合，所以你可以用下面的結構結束：

<div class="productsresult"> 
    <div class="products"><p>.....</p> 
     <div class="products"><p>.....</p> 
      <div class="products"><p>.....</p></div> 
      <aside class="SideBar"></aside> 
      <Footer class="Footer">....</Footer> 
     </div> 
    </div> 
</div>

要解決這個問題，你需要進行以下更改：

<div class="productsresult"> 
<?php if ($totalRows_ProductsData > 0) { // Show if recordset not empty ?> 
    <?php do { ?> 
     <div class="products"> 
      <p> 
       <?php echo $row_ProductsData['product_name']; ?> 
       <?php echo $row_ProductsData['price']; ?> 
       <?php echo $row_ProductsData['image']; ?> 
      </p> 
     </div> 
    <?php } while ($row_ProductsData = mysql_fetch_assoc($ProductsData)); ?> 
<?php } // Show if recordset not empty ?> 
<?php if ($totalRows_ProductsData == 0) { // Show if recordset empty ?> 
    There are no products in this category! 
<?php } // Show if recordset empty ?> 
</div> 

<aside class="SideBar"> 
    <?php include ("/includes/catalogue.php"); ?> 
</aside>

上面的代碼將導致下面的代碼：

<div class="productsresult"> 
    <div class="products"><p>.....</p></div> 
    <div class="products"><p>.....</p></div> 
    <div class="products"><p>.....</p></div> 
</div> 
<aside class="SideBar"></aside>

請注意，如果你只需要個一個產品包裝的div，你應該代碼改成這樣：

<div class="productsresult"> 
<?php if ($totalRows_ProductsData > 0) { // Show if recordset not empty ?> 
    <div class="products"> 
     <?php do { ?> 
      <p> 
       <?php echo $row_ProductsData['product_name']; ?> 
       <?php echo $row_ProductsData['price']; ?> 
       <?php echo $row_ProductsData['image']; ?> 
      </p> 
     <?php } while ($row_ProductsData = mysql_fetch_assoc($ProductsData)); ?> 
    </div> 
<?php } // Show if recordset not empty ?> 
<?php if ($totalRows_ProductsData == 0) { // Show if recordset empty ?> 
    There are no products in this category! 
<?php } // Show if recordset empty ?> 
</div>

這將導致以下結構：

來源

2017-05-03 20:10:35

我無法表現出我多麼感激！謝謝，它完美的作品。 – ItssMohammed

如何防止邊欄移動到中間？

回答

相關問題