Как эффективно центрировать части списка с помощью CSS [Img Inside]
проблема в том, что я знаю, что могу правильно центрировать все три объекта в списке, используя 3 цикла while с помощью CSS, но я также знаю, что использование 3 циклов whiles для чего-то подобного является пустой тратой ресурсов
Также я люблю, если решение включает в себя порядок их относительно «белой страницы», которая, кажется, тоже архивирует
так что вопрос в том, как будет лучшим CSS-подходом сделать это без необходимости вызывать три цикла While?
(сохраняя отзывчивость)
ОБНОВЛЕНИЕ: Дело в том, продукты, типы & Прайс-листы размещаются в базе данных, чтобы облегчить контроль и администрирование всех их сразу, и показать их в списке тем, кто их посещает.
Другие вещи, стили и «скрытые», потому что это черные & белые квадраты, которые на самом деле будут белыми, если останется некоторое количество продукта, и будут черными, если это не так.
Кодекс связан со следующими:
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] + ')');
});
});
Это должно быть
Пожалуйста, не стесняйтесь спрашивать разъяснения, комментировать, отвечать, предлагать и т. Д. … все отзывы о помощи, где бы это ни было, приветствуются.
Заранее спасибо!
Решение
Лучшее использование с <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>
И установите ваши форматирования, чтобы сделать их встроенными
Другие решения
Как я уже сказал, я предлагаю использовать таблицу, после всего того, для чего предназначены таблицы данных.
Если изменение разметки не является решением, вот быстрый взлом, основанный на том факте, что вы, очевидно, хотите, чтобы каждое поле занимало 25% от общей ширины. Просто измените последнюю часть вашего CSS на:
#doscinco {
float:left;
left:25%;
width:25%;
position:relative;
}
#cincuenta {
float:left;
width:25%;
}
#sietecinco {
float:left;
width:25%;
}
Но есть и другие проблемы:
- Ваш HTML будет иметь несколько тегов с одинаковым идентификатором, потому что вы используете идентификаторы в цикле.
- Вы повторяете определения стилей, которые вы можете поместить в отдельный класс, и повторно использовать этот класс, чтобы облегчить поддержку ваших определений.
- Вы используете
<center>, Лучше поместить всю информацию о стиле в ваш CSS. - Последний, но тем не менее важный:
display:showне является допустимым CSS, и делать эти 2 класса скрытыми, просто чтобы скрыть их, все равно излишне.