问题是，我知道我可以使用 3 个 while 循环和 CSS 将列表中的所有三个对象正确居中，但我也知道使用 3 个 while 循环来做类似的事情会浪费资源
如果解决方案也包括相对于“白页”的排序，我也很高兴，其中 3 个 while 循环方法似乎也可以实现
所以问题是，最好的 CSS 方法如何在不需要调用三个 While 循环的情况下做到这一点？ (保存响应)
更新:问题是，产品、类型和价格都保存在数据库中，以便同时轻松控制和管理所有这些，并更轻松地将它们显示在列表中给访问它们的人。
其他东西，样式和“隐藏”是因为 div 是黑白方 block ，如果有一些产品剩余，它实际上是白色的，如果不是这样，它将是黑色的。
相关的代码是这个:
样式.CSS
#TextTitl {
font: 38px/1.1em "Fredericka the Great",fantasy;
color: #5D463E;
}
#stylProdct {
background-color:#fff;
width:75%;
}
.whiteAvbly
{
display:hidden;
background-color:#ffffff;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
.blackAvbly
{
display:hidden;
background-color:#380807;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
#doscinco {
float:left;
left:25%;
position:relative;
}
#cincuenta {
float:left;
left:50%;
position:relative;
}
#sietecinco {
float:left;
left:75%;
position:relative;
}
verduras.php
<?php
include('conection.php');
echo '<center><section id="stylProdct">';
$Verd = 'Verduras';
$smt = $con->prepare("select * from prodcts WHERE Type = :Verduras Order by PrdName ASC");
$smt->bindParam(':Verduras', $Verd, PDO::PARAM_STR);
$smt->execute();
echo '<br /><br /><H2 id="TextTitl">VERDURAS</H2><br />';
while ($smr = $smt->fetch(PDO::FETCH_ASSOC, PDO::FETCH_ORI_NEXT))
{
$idf = $smr['Availblty'];
$ids = (int) $idf;
echo'<p>';
if($ids > 0)
{
echo '<style>.whiteAvbly{display:show;}</style><div class="whiteAvbly"></div>';
}
else
{
echo '<style>.blackAvbly{display:show;}</style><div class="blackAvbly"></div>';
}
echo '<div id="doscinco">'.nl2br($smr['PrdName']).'</div><div id="cincuenta">'.nl2br($smr['SellType']).'</div><div id="sietecinco">$'.nl2br($smr['Cost']).'</div></p><br />
------------------------------------------------------------------------<br />';
}
echo '</section></center>';
?>
HTML
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Clone Dinka</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jqwdinka.js"></script>
</head>
<body>
<div class="mullet"></div>
<header>
<div id="BigSist"><img id="hermana" src="imago/upper_logo.png"/><p class="white">tel</p><p class="black">(+56 9) 65637350</p></div>
<img id="logoc" src="imago/logo.png"/>
<nav>
<div class="container">
<p class="white" id="Tralala">DESPACHO DIRECTO A TU PUERTA</p>
<span>Haz tu pedido / Cotiza</span>
</div>
<ul id="cont">
<li id="than"><a href="main">INICIO</a></li>
<li class="menuHead"><a href="#">PRODUCTOS</a>
<ul id="cont">
<li><a href="verduras">Verduras</a></li>
<li><a href="Frutas">Frutas</a></li>
<li><a href="MoteconHuesillo">Mote con Huesillo</a></li>
</ul>
</li>
<li><a href="ComoComprar">¿COMO COMPRAR?</a></li>
<li><a href="Contacto">CONTACTO</a></li>
</ul>
</nav>
</header>
<!--"http://lorempixel.com/g/470/300"-->
<div id="content"></div>
</body>
</html>
Javascript
$(document).ready(function(){
//initial
$('#content').load('main.php');
$('body').load().css('background-image', 'url(' + 'imago_tesla/fondo0.jpg' + ')');
//handle menu clicks
$('ul#cont li a').click(function(e) {
e.preventDefault()
var page = $(this).attr('href');
$('#content').load(page + '.php');
var pageImages = {
'main': 'imago_tesla/fondo0.jpg',
'verduras': 'imago_tesla/fondo4.jpg',
'Frutas': 'imago_tesla/fondo4.jpg',
'MoteconHuesillo': 'imago_tesla/fondo4.jpg',
'ComoComprar': 'imago_tesla/fondo2.jpg',
'Contacto': 'imago_tesla/fondo.jpg'
}
$('body').css('background-image', 'url(' + pageImages[page] + ')');
});
});
一定是
请随时要求澄清、评论、回答、建议等...欢迎所有帮助反馈，无论其性质如何。
提前致谢!
最佳答案
最好与 <table> 一起使用s，但如果必须使用 <div>要么设置特定大小(不是最佳选择)，要么将每一列包围在单独的 <div> 中示例:
<!-- Column products -->
<div>
<!-- Product lines -->
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>...</div>
</div>
<!-- Column units -->
<div>
<!-- Product lines -->
<div>kg</div>
<div>l</div>
<div>2/kg</div>
<div>...</div>
</div>
<!-- Column prices -->
<div>
<!-- Product lines -->
<div>800$</div>
<div>200$</div>
<div>342$</div>
<div>...</div>
</div>
并设置格式以使其内联
关于php - 如何使用 CSS [Img Inside] 有效地将列表的各个部分居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28659176/