Может ли CSS справиться с этой ситуацией, подобной песочным часам?
https://stackoverflow.com/questions/2096639
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Мне трудно придумать решение следующей проблемы.
Позвольте мне сначала проиллюстрировать это:
Ситуация
У меня есть 26 элементов (в этом примере, как правило, их количество неизвестно ..), но одновременно могут быть видны только 12..У меня также есть некоторые элементы навигации (зеленые прямоугольники).
Ширина фиолетовых и зеленых прямоугольников фиксирована , но высота фиолетовых может варьироваться в зависимости от содержимого ..
Все нормально, и я могу сделать это с помощью css.
Я использую неупорядоченный список (плавающих элементов) для своих элементов, и я обозначил первые два <li> элементы в качестве элементов навигации.Первый имеет поплавок слева, а второй - справа.Все это работает, и поток остальных элементов проходит между двумя зелеными.
Проблема
Но теперь мне нужно, чтобы зеленые элементы были во втором ряду (или в последнем, если эта концепция поможет, поскольку строк будет только две).
Я хочу иметь возможность скрыть первые X элементов и показать следующие X , и они встанут на свои места сами по себе ..
Перефразируя вопрос, могу ли я расположить некоторые элементы (зеленые) таким образом, чтобы контролировать их положение, но при этом позволять им вмешиваться в поток из их новых местоположений ?
Я надеюсь, что это понятно.Если нет, спрашивайте, и я предоставлю как можно больше информации..
Вещи, которые я пробовал, но которые не сработали
- Перемещение зеленого элемента с отрицательными нижними полями или положительными верхними полями.Они сдвинутся со своего места, но другие элементы не займут их место.
- Используя абсолютное положение, но тогда элементы полностью удаляются из потока и они не влияют на другие элементы, поэтому они перекрываются с другими элементами..
[выделенные серым цветом элементы скрыты, я просто показываю их, чтобы вы знали, что они существуют..]
Немного кода, который поможет вам начать
<style type="text/css">
ul,li{padding:0;margin:0; list-style-type:none;}
ul{
width:155px;
position:relative;
height:125px;
border:1px solid red;
}
li{
float:left;
background-color:purple;
margin-left:5px;
margin-top:5px;
width:25px;
text-align:center;
line-height:25px;
color:white;
}
.prev{
color:black;
background-color:green;
}
.next{
color:black;
float:right;
margin-right:5px;
background-color:green;
}
</style>
и
<body>
<ul>
<li class="prev"><</li>
<li class="next">></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
</ul>
</body>
Решение
Хорошо, очевидно, что это не может быть решено только с помощью Css / Html ..
Итак, чтобы решить эту проблему, я использовал некоторый CSS (с встроенный блок кроссбраузерный) и немного jQuery для перемещения кнопок навигации, чтобы они всегда оставались в нужной мне точке..
Для справки вот решение ..
CSS - файл
<style type="text/css">
ul,li{padding:0;margin:0; list-style-type:none;}
#performances{
width:155px;
border:1px solid red;
line-height:0;
font-size:0;
}
#performances li{
font-size:12px;
background-color:purple;
margin-left:5px;
margin-bottom:5px;
margin-top:5px;
width:25px;
text-align:center;
line-height:25px;
color:white;
display:none;
vertical-align:top;
}
#performances .prev{
color:black;
background-color:green;
display: -moz-inline-stack;
display:inline-block;
}
#performances .next{
color:black;
background-color:green;
display: -moz-inline-stack;
display:inline-block;
}
#performances .shown{
display: -moz-inline-stack;
display:inline-block;
}
#performances .placeholder{visibility:hidden;}
</style>
<!--[if lte IE 7]><style>
#performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;}
</style><![endif]-->
Javascript (jQuery )
<script type="text/javascript">
function resetNextPrev( ){
$next.insertAfter('#performances li.shown:eq('+ ($perpage-1) +')');
$prev.insertAfter('#performances li.shown:eq('+ ($perline-1) +')');
}
$(document).ready(function(){
$perpage = 8;
$perline = ($perpage+2) / 2;
$page = 1;
$itemcount = $('#performances li.performance').length;
$pages = Math.ceil ( $itemcount / $perpage);
$next = $('#performances li.next');
$prev = $('#performances li.prev');
$('#performances li.performance').slice(0,$perpage).addClass('shown');
if (($pages * $perpage) > $itemcount )
for (var i =0;i< ($pages * $perpage)-$itemcount;i++)
$('<li class="performance placeholder">test</li>').appendTo('#performances');
resetNextPrev();
$('li.next').click(function(){
if ($page < $pages)
$('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page-1),$perpage * $page).addClass('shown');
resetNextPrev( $perline );
});
$('li.prev').click(function(){
if ($page > 1)
$('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page-1),$perpage * $page).addClass('shown');
resetNextPrev( $perline );
});
});
</script>
..и тот HTML
<ul id="performances">
<li class="prev"><</li>
<li class="next">></li>
<li class="performance">1</li>
<li class="performance">2</li>
<li class="performance">3</li>
<li class="performance">4 dfs s sf</li>
<li class="performance">5</li>
<li class="performance">6</li>
<li class="performance">7</li>
<li class="performance">8</li>
<li class="performance">9</li>
<li class="performance">10</li>
<li class="performance">11</li>
<li class="performance">12</li>
<li class="performance">13</li>
<li class="performance">14</li>
<li class="performance">15</li>
<li class="performance">16</li>
<li class="performance">17</li>
<li class="performance">18</li>
<li class="performance">19</li>
</ul>
Внутри есть пара жестко закодированных значений, но я оставлю это для всех, кто может извлечь из этого что-то новое ...
Спасибо всем за руководство :)
Рабочий пример (для тех, кто хочет увидеть это в действии) : http://www.jsfiddle.net/gaby/Ba3UT/
Другие советы
Возможно, стоит использовать javascript для такой сложной ситуации.Библиотеки, такие как jQuery, могут сделать это довольно безболезненно.Явное определение этих правил переноса в js будет понятнее и проще в обслуживании, чем делать это неявно с помощью множества правил css.
Сделайте так, чтобы li за исключением навигационных , таких как display: inline-block и, возможно, переместить навигацию li до конца списка?
Не видя вашего кода, я не могу быть уверен.Однако пробовали ли вы поместить зеленые элементы в теги и пометить их как понятные:и то, и другое;?Однако это может переместить их в 3-й ряд.Это то, что вы должны оформить заказ.
