Форум PHP программистов > скрытие div внутри div за границей внешнего

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: скрытие div внутри div за границей внешнего

qpayct

14.03.2010 - 02:50

есть див внутри которого 100 дивов. размер внешнего дива 500х100 размер внутренних 100х100, так помещается только 5, а все остальные у меня, как только достигается граница, перепрыгивают на новую строку, а мне их надо оставить в той же строке, чтоб потом легко можно было таскать взад/вперёд, но так, чтоб они скрывались за границей внешнего дива, внутри которого они находятся.
как добится такого эффекта?

Спустя 8 минут, 17 секунд (14.03.2010 - 01:59) Nikitian написал(а):

overflow:hidden Либо, если нужен скролл, то overflow:auto
Это для родительского дива.

Спустя 4 минуты, 19 секунд (14.03.2010 - 02:03) qpayct написал(а):

это да. я, как раз тож нашел overflow:hidden и т.п, но проблема в том, что они листаются по вертикали

а мну по горизонтали хочу, чтоб они в одной строке булы

Спустя 3 минуты, 22 секунды (14.03.2010 - 02:06) Nikitian написал(а):

Для внутренних дивов float:left? Или я неправильно вас понимаю.

Спустя 4 минуты, 47 секунд (14.03.2010 - 02:11) qpayct написал(а):

неа. display: inline-block; и float:left; при достижении граници спрыгивают вниз, а без них дивы выстраиваются каждый в отдельную строку.... как победить?

сделал display: inline; выстроились но стали маленькими, как спаны и не соответствуют точно заданым размерам

сделал display: table-cell; по высоте соответствуют заданым размерам, а по ширине нет

display: absolute; и генерация left: 100 * $i; решила проблему, но теперь скрытие не работает

где я накосячил?

Спустя 13 минут, 55 секунд (14.03.2010 - 02:25) Nikitian написал(а):

Так?


<div style="width:500px;height:100px;overflow:auto;">
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
     <div style="float:left;width:100px;height:100px;"></div>
<div style="clear:both;"></div>
</div>

Спустя 6 минут, 58 секунд (14.03.2010 - 02:32) qpayct написал(а):

<div style="width:500px;height:100px;overflow:auto;">
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">1</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">2</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">3</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">4</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">5</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">6</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">7</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">8</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">9</div>
     <div style="float:left;width:100px;height:100px;border:solid 1px black;">10</div>
  <div style="clear:both;"></div>
  </div>

Спустя 1 минута, 2 секунды (14.03.2010 - 02:33) Nikitian написал(а):

я там опечатался в стилях. overflow написал неверно. 2 строки стилей, можно было и прочитать

Спустя 17 минут, 23 секунды (14.03.2010 - 02:51) qpayct написал(а):

только это ничего не меняет

кроме появления скрола ничего не изменилось
всё одно строку перескакивает....

Спустя 13 минут, 2 секунды (14.03.2010 - 03:04) Nikitian написал(а):

точно, тогда так:


<div style="width:500px;height:100px;overflow:auto;">
	<div style="width:1100px;auto;height:100px;overflow:auto;">
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
		 <div style="float:left;width:100px;height:100px;"></div>
	<div style="clear:both;"></div>
	</div>
</div>

Хоть это и не красиво

Спустя 4 минуты, 24 секунды (14.03.2010 - 03:08) qpayct написал(а):

О! да ты крут

а я тока спать хотел идти.
спасибо дружище

<div style="width:500px;height:100px;overflow:auto;">
	<div style="width:1100px;height:100px;">
		 <div style="float:left;width:100px;height:100px;">1</div>
		 <div style="float:left;width:100px;height:100px;">2</div>
		 <div style="float:left;width:100px;height:100px;">3</div>
		 <div style="float:left;width:100px;height:100px;">4</div>
		 <div style="float:left;width:100px;height:100px;">5</div>
		 <div style="float:left;width:100px;height:100px;">6</div>
		 <div style="float:left;width:100px;height:100px;">7</div>
		 <div style="float:left;width:100px;height:100px;">8</div>
		 <div style="float:left;width:100px;height:100px;">9</div>
		 <div style="float:left;width:100px;height:100px;">10</div>
	</div>
  </div>

работает отлично

Быстрый ответ:

Здесь расположена полная версия этой страницы.