Jump to content
  • 0

Кто знает как сделать как на Google?


Deacon
 Share

Question

У меня разрешение моника 1280px по ширине. При поиске картинок вмещается в строку 6 изображений. Если браузер начать сворачивать, уменьшая полезную область, то 6 картинок сначала прижимаются вплотную друг к другу, а через секунду уже в строке их оказывается 5, а не 6. Продолжаем аналогичные действия: вместо 5-ти встроке становитсяя 4 и потом 3. На тройке вс?, стоп: количество изображений в строке не уменьшается.

Рандомная ссылка для примера и проверки эффекта

http://images.google.com/images?imgsz=huge...%BD%D0%BE%D0%BA

Как такое сделать?

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

прием называется распорка. все картинки - с обтеканием (float: left), таким образом при сужении они переходят на след. строку. а распорка шириной в 3 картинки просто сверху (возможно и не видна - не думал) и из-за не? страница уже не становится

Link to comment
Share on other sites

  • 0

блин во как!) ну тогда проконтроль сначала на словах.

как я понял:

каждая картинка объединена с текстом в блоке, первые 3 объединены в блоке...остальные идут без объединения...верно?

картинка, текст

картинка, текст

картинка, текст

и понеслось без умолку

картинка, текст

ч? не так исправьте)

Link to comment
Share on other sites

  • 0
все картинки - с обтеканием (float: left), таким образом при сужении они переходят на след. строку

Все так, да не совсем. Делов том, что картинки на той странице расположены равномерно, чего никак кроме как таблицами не добится (фанаты блочной верстки, привет!!!!). Поэтому там при изменении размеров окна меняется количество ячеек в строке.

Link to comment
Share on other sites

  • 0

Ага, и ширину задавать для каждого блока. Впрочем у гугля так и сделано, каждой ячейке задается ширина, что имхо глупо. Я бы оставил это на откуп браузеру. Если бы получилось не очень, томенял бы ширину у col не ни как не у каждой ячейки.

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

×
×
  • 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