个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个侧边栏，其中包含产品类别列表，并且在主体中我创建了一个重复区域以根据单击的类别显示这些产品。如果我选择一个空类别，设计保持不变，但当我选择一个包含产品的类别时，侧边栏会以某种方式出现在页面中间，甚至页脚也会变小。
在我创建重复区域之前，侧边栏没有问题，它没有移动或任何东西。我创建了一个包含页面和 css 文件的 fiddle 。如果我错过了什么，请告诉我，因为我以前没有使用过 fiddle 。谢谢。
https://jsfiddle.net/w4rhvbL0/1/
<!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>
最佳答案
在您的代码中，您检查此条件 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>
请注意，您没有在 while 循环内关闭 div，因此它会生成无效的 HTML 结构，并将 放在一边循环产生的未闭合的 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>
请注意，如果您只需要一个 products wrapper 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>
这将导致以下结构:
<div class="productsresult">
<div class="products">
<p>.....</p>
<p>.....</p>
<p>.....</p>
</div>
</div>
<aside class="SideBar"></aside>
关于html - 如何防止侧边栏移动到中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43768716/
27
4
0
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书，但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我，缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始？ (中间纵横) 最佳答案 有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作？ 最佳答案 td 元素上的 height 等同于 min-height，因为如果需要，表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div，其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格，只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案，并且在每个教程中我都发现了某种中间表的用法，如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色，但为什么要
我正在寻找以下解决方案。我想定位一个图像元素，例如 在中间。所以高度是视口(viewport)的高度，宽度会自动设置，图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局，它更像是注册用户的个人仪表板。我让它变得简单，使用基本的 2 列网格，一个用于侧边栏，一个用于主要内容。 因为，例如，80% 的网站使用将发生在一个单独的子系统中，在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码，所以它有一个把单词放在左边、中间或右边，但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站，但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书，然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链，但出于某种原因，当我在我的计算机上安装我的根 CA 并尝试验证证书链时，它总是告诉我它找不到证书的颁发者.为了让事情发生，我必须安装中间 CA，这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个，而是完全认同这个想法。但是，我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点？ 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中，字母有大写和小写形式。在 Python 中，如果你想比较两个字符串而不考虑它们的大小写，你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀！