如何使用 CSS [Img Inside] 有效地将部分列表居中

Question

问题是，我知道我可以使用 3 个 while 循环和 CSS 将列表中的所有三个对象正确居中，但我也知道使用 3 个 while 循环来做类似的事情是一种浪费资源

我也喜欢如果解决方案也包括相对于 "white page" 的顺序，其中 3 个 while 循环方法似乎也可以实现

所以问题是，在不需要调用三个 While 循环的情况下，最好的 CSS 方法是什么？（节省响应速度）

更新：问题是，产品、类型和价格都保存在数据库中，以便立即轻松控制和管理所有这些，并将它们显示在列表中给访问它们的人更简单。

其他东西，样式和 "hidden" 是因为 div 是黑白方块，如果有一些产品剩余，它实际上是白色的，如果不是案子。

相关代码是这个：

Style.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] + ')');
  });
});

那一定是

请随时要求澄清、评论、回答、建议等...欢迎任何性质的帮助反馈。

提前致谢！

Answer 1

最好与 <table> 一起使用，但如果必须使用 <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>

并设置格式以使其内联

Answer 2

正如我已经说过的，我建议使用 table，毕竟这是 table 的数据类型。

如果更改标记不是解决方案，这里有一个快速的技巧，基于显然您希望每个字段占据总宽度的 25% 的事实。只需将 CSS 的最后一部分更改为：

#doscinco {
    float:left;
    left:25%;
    width:25%;
    position:relative;
}
#cincuenta {
    float:left;
    width:25%;
}
#sietecinco {
    float:left;
    width:25%;
}

但还有其他问题：

您的 HTML 将有多个具有相同 ID 的标签，因为您在循环中使用 ID。
您正在重复样式定义，您可以将它们放在单独的 class 中并重复使用 class 以使您的定义更易于维护
您正在使用 <center>。最好将所有样式信息放入 CSS.
最后但并非最不重要的一点：display:show 无效 CSS 并且将那些 class 隐藏起来只是为了取消隐藏它们是多余的。

如何使用 CSS [Img Inside] 有效地将部分列表居中

How to center parts of a list efficiently with CSS [Img Inside]

html

css

php

while-loop

centering