CSS может обработать эту подобную песочным часам ситуацию?
Мне нелегко думать решение следующей проблемы.
Позвольте мне проиллюстрировать его сначала:
Ситуация
У меня есть 26 объектов (в этом примере, в целом число не известно..), но только 12 могут быть видимы когда-то.. У меня также есть некоторые элементы навигации (зеленые поля)
Ширина фиолетовых и зеленых полей фиксируется, но высота фиолетового цвета может варьироваться согласно содержанию..
Все нормально, и я могу сделать это с CSS.
Я использую незаказанный список (пущенных в ход объектов) для моих объектов, и я определял первые два элементы как навигации. Сначала имеет оставленное плавание и второе право плавающее. Все это работает, и поток остальной части объектов идет между двумя зелеными.
Проблема
Но теперь мне нужны зеленые объекты, чтобы быть на второй строке (или в последний раз если то понятие помогает, поскольку только будет две строки),
Я хочу смочь скрыть первое X элементов и показать следующее X, и они падают в положении самостоятельно..
Для перефразирования вопроса действительно ли я могу расположить некоторые элементы (зеленые) таким способом управлять их положением, но все еще позволить им вмешиваться в поток от своих новых местоположений?
Я надеюсь, что это ясно. Если не спрашивают далеко, и я обеспечу как можно больше информации..
Вещи, которые я попробовал, который не работал
- Перемещение зеленого объекта с отрицательными нижними полями или положительных верхних полей. Они переместятся из их места, но другие элементы не заполнят свое положение.
- Используя абсолютное положение, но затем элементы полностью удалены из потока, и они не влияют на другие элементы, таким образом, они накладываются с другими элементами..
[они grayed объекты скрыты, я просто показываю им так, Вы знаете, что они существуют..]
Некоторый код для запущения Вас
и
- <
- >
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4 ответа
ОК, очевидно, это не может быть решено только с помощью CSS / HTML ..
Итак, чтобы решить его, я использовал некоторые CSS (с встроенным блоком CrossBrower ) и какой-то 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/
Требуется выполнить повторную обработку с помощью счетчика, а не foreach. При итерации пересылки необходимо настроить счетчик при удалении предметов.
for(int i=listBox1.Items.Count - 1; i > -1; i--) {
{
if(listBox1.Items[i].Contains("OBJECT"))
{
listBox1.Items.RemoveAt(i);
}
}
Можно попробовать использовать следующий метод:
List<string> temp = new List<string>();
foreach (string item in listBox1.Items)
{
string removelistitem = "OBJECT";
if(item.Contains(removelistitem))
{
temp.Items.Add(item);
}
}
foreach(string item in temp)
{
listBox1.Items.Remove(item);
}
Это должно быть правильно, поскольку оно просто копирует содержимое во временный список, который затем используется для его удаления из ListBox.
Все остальные, пожалуйста, не стесняйтесь упоминать исправления, так как я не на 100% уверен, что это полностью правильно, я использовал это давно.
-121--3509344-Возможно, стоит использовать javascript для этой сложной ситуации. Такие библиотеки, как jQuery, могут сделать его безболезненным. Определение этих правил обертки в явном виде в js будет более ясным и простым в обслуживании, чем неявное выполнение с большим количеством правил css.
, не видя вашего кода, я не могу быть уверен. Тем не менее, вы пытались поместить зеленые элементы в теги и отмечать их как ясную: оба; Это может переместить их в 3-й ряд, хотя. Это то, что вы должны оформить заказ.
Сделайте Li , за исключением навигации как отображения : встроенный блок и, возможно, переместите навигацию li до конца списка?