Jump to content
  • 0

Блок с горизонтальным скроллом

Dioni$$

Asked by Dioni$$,

 Share

Question

Dioni$$ Explorer

Dioni$$

Posted
Posted

Здравствуйте.

Подскажите плиз как сверстать блок как тут вверху

http://www.shurum-burum.ru/photos/matreshk...08/photo/#49033

который с фотками и гризонтальным скроллом.

Интересует только этот блок в принципе (главное чтоб он не фикс ширины был)

Буду оч благодарен любым идеям (в js не шарю :( )

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Dioni$$ Explorer

Dioni$$

Posted
  • Author
Posted
overflow: scroll;

согласен - но вы наверное не смотрели по ссылке что именно надо, ведь скролл появляется только когда контент больше размеров блока.

но у нас контент - маленькие блоки например 100 на 100 пикселей. и как сделать чтоб блокине переносились на следующую строку а выстраивались в одну линию?

только не говорите float:left )))

Link to comment
Share on other sites
  • 0
Kaylang Explorer

Kaylang

Posted
Posted (edited)
и как сделать чтоб блокине переносились на следующую строку а выстраивались в одну линию?

только не говорите float:left )))

А каким еще способом можно выстраивать дивы в горизонтальный ряд?

ЗЫ. Не увидел по ссылке блоков с горизонтальным скроллом.

По три дива вложены внутрь родительского дива.

Ан, нет. Просто всем дивам с картинками и описанием прописано свойство width:45% !important;

Но все они имеют также свойство float:left.

Edited by Kaylang
Link to comment
Share on other sites
  • 0
Kaylang Explorer

Kaylang

Posted
Posted
Можно задать дивам inline-block, тоже начнут выстраиваться горизонтально.

А, точно. Не пользую это свойство, когда-то были проблемы с ним в некоторых браузерах. Надо будет посмотреть, может уже ситуация исправилась.

Хотя учитывая совсем недавний опыт с table, table-row и table-cell, гложут меня некоторые сомнения (с)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

А где по ссылке блоки с Горизонтальным скроллом?

А, точно. Не пользую это свойство, когда-то были проблемы с ним в некоторых браузерах. Надо будет посмотреть, может уже ситуация исправилась.

Хотя учитывая совсем недавний опыт с table, table-row и table-cell, гложут меня некоторые сомнения (с)

Если всё правильно делать, то проблем не будет.

Link to comment
Share on other sites
  • 0
Dioni$$ Explorer

Dioni$$

Posted
  • Author
Posted (edited)
А где по ссылке блоки с Горизонтальным скроллом?

Да виноват. Только что сам перешел... На ту страницу че то ссылка не переходит.

Вобщем клацните по фотке любой чтоб она раскрылась в полный размер.

Тогда сверху как раз и будет блок с кучей мелких фоток и гризонтальным скроллом.

Чебурашка - да типа такого надо.

А можно ли такое чисто на хтмл и цсс сделать? Ну или с помощью скрипта. (Я имею ввиду верхний блок с превьюшками)

Потому как тут немного не так - а мне надо один в один как в примере. То есть превьюшки сверху в локе со скроллом, а фото в полный размер ниже.

Edited by Dioni$$
Link to comment
Share on other sites
  • 0
Kaylang Explorer

Kaylang

Posted
Posted (edited)
Если всё правильно делать, то проблем не будет.

Как скажешь. :(

Вобщем клацните по фотке любой чтоб она раскрылась в полный размер.

Тогда сверху как раз и будет блок с кучей мелких фоток и гризонтальным скроллом.

Там сделано таблицей, а не дивами.

Edited by Kaylang
Link to comment
Share on other sites
  • 0
Чебурашка Explorer

Чебурашка

Posted
Posted (edited)
А можно ли такое чисто на хтмл и цсс сделать?

Вывод одной строкой:

	<head>
		<style type="text/css">
			#container {
				display: table;
			}

			* html #container div {
				float: left;
				clear: right;

			}

			#container div { 
				display: table-cell;
				white-space: nowrap;
			}
		</style>
	</head>
	<body>
<div id="container">
			 <div><img src="1.jpg" /></div>
			 <div><img src="2.jpg" /></div>

</div>
	</body>

Edited by Чебурашка
Link to comment
Share on other sites
  • 0
Dioni$$ Explorer

Dioni$$

Posted
  • Author
Posted
А скролл там отдельным дивом сделан, который расположен под дивом с таблицей.

да при чем тут. я про то что содержимое вылазит за границы блока. а надо чтоб горизонтальный скролл появлялся

Link to comment
Share on other sites
  • 0
Kaylang Explorer

Kaylang

Posted
Posted
да при чем тут. я про то что содержимое вылазит за границы блока. а надо чтоб горизонтальный скролл появлялся

При том, что на указанном примере это сделано отдельным дивом. Только и всего.

Диву который содержит таблицу прописано overflow:hidden;

Реализовано средствами JQuery.

Если тебе надо горизонтальный скролл, то самый простой вариант:

<div style="overflow:scroll;">
	<table width="2000px" border="1px">
		<tr height="50px">
			<td width="25%">Какой-то текст</td>
			<td width="25%">Какой-то текст</td>
			<td width="25%">Какой-то текст</td>
			<td width="25%">Какой-то текст</td>
		</tr>
	</table>
</div>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept