| |
 5.2 Кб |
|
| | Есть резиновый <ul> в котором в зависимости от ширины экрана выводятся n-е количество <li>. Если ширина экрана такая, что не влазит буквально несколько пикселей, то справа получается большая дыра. (см. вложение) Можно ли каким то образом сдвинуть всю эту конструкцию на центр?
Если выставляю в стилях text-align: center, то сдвигается к центру, но если в последнем ряду <li> меньше, чем в остальных, то они тоже форматируются по центру и смотрится не красиво. margin: 0 auto; не работает, т.к. неизвестна ширина блока.
http://softtime.ru/forum/files/90981-20140331135741.png | |
| |
|
|
| |
|
|
| |
для: P@Sol
(31.03.2014 в 13:54)
| | | код приведите.
а как считается это n? через джаваскрипт, через медиа запросы? | |
| |
|
|
| |
|
|
| |
для: Enter
(31.03.2014 в 14:26)
| | |
<?
<body>
<div class="custom-margins">
<div class="container pape\">
<ul class="thumbs li242px subcat">
<li><div class="catimage"><a href="/1/" title="Здоровье-Экспресс"><div class="catimage"><img alt="Здоровье-Экспресс" src="/456/h_b1398ff91b700e960e7530ed1f59b43d" height="160" width="240" style="border: 1px solid #bcbdb5;"></div><h5 class="head">Здоровье-Экспресс</h5></a></div></li>
<li><div class="catimage"><a href="/2/" title="Кардиовизор"><div class="catimage"><img alt="Кардиовизор" src="/458/h_e53f78106841db2224b54dfce68b89c6" height="160" width="240" style="border: 1px solid #bcbdb5;"></div><h5 class="head">Кардиовизор</h5></a></div></li>
<li><div class="catimage"><a href="/3/" title="Кардиоанализатор ЭК9Ц-01-КАРД"><div class="catimage"><img alt="Кардиоанализатор ЭК9Ц-01-КАРД" src="/465/h_1325d87df6a6a6fd42b196bdea0bba8c" height="160" width="240" style="border: 1px solid #bcbdb5;"></div><h5 class="head">Кардиоанализатор ЭК9Ц-01-КАРД</h5></a></div></li>
и т.д.
</ul>
|
ul.thumbs { padding: 0; margin: 0; }
ul.thumbs li { display:inline-block; vertical-align:top; padding: 0; margin: 0 28px 0px 0px; position: relative; display: block\9; float: left\9; height: 320px\9; text-align: left; /* IE8- hack */ }
}
|
| |
| |
|
|
| |
|
|
| |
для: P@Sol
(31.03.2014 в 13:54)
| | | решение найдено! http://www.sql.ru/forum/995042/rezinovyy-po-shirine-blok-s-centrovkoy-kontenta
Главная идея - накидывание пустых блоков в конец, взята отсюда http://www.imobilco.ru/books/?prefix=%D0%B0.
<?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrapper {
text-align:center;
/*text-align:justify;*/
line-height:0;
min-width:238px;
padding:20px 18px 0;
border:2px solid blue;
letter-spacing:14px;
}
.item {
width:200px;
height:285px;
text-align:left;
margin-bottom:20px;
vertical-align:top;
line-height:normal;
display:inline-block;
border:1px solid red;
}
.stub {
height:0;
margin:0;
padding:0;
border:none;
width:202px;
vertical-align:top;
display:inline-block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
</div>
</body>
</html>
|
| |
| |
|
|
