Помощник
|
Расположение картинок |
Sleepwalker_mw
|
Сообщение
#1
|
||
|
|
||
|
|||
webdign |
29.1.2013, 10:56;
Ответить: webdign
Сообщение
#2
|
|
не совсем понятно о чем речь.
картинки при перечислении и так вряд будут. а квадрат можно две картинки - перенос - две картинки <div style="float:left"></div>...<div></div>
<div style="float:left"></div><div></div> <div style="float:left;clear:both"></div><div></div> -------------------- |
|
|
isvetlichniy |
29.1.2013, 18:34;
Ответить: isvetlichniy
Сообщение
#3
|
|
<div style="background:#ffffff;"> <a href="#"><img src="path_to_image"></a> <a href="#"><img src="path_to_image"></a> <a href="#"><img src="path_to_image"></a> <a href="#"><img src="path_to_image"></a> <a href="#"><img src="path_to_image"></a> </div> а квадрат вот так <div style="background:#ffffff;overflow:hidden;">
<div> <a href="#"><img src="path_to_image"></a> <a href="#"><img src="path_to_image"></a> </div> <div> <a href="#"><img src="path_to_image"></a> <a href="#"><img src="path_to_image"></a> </div> </div> |
|
|
Sleepwalker_mw
|
Сообщение
#4
|
|
а как увеличить расстояние между картинками, когда они расположены в квадрат?
сделать padding: 10px во все стороны |
|
|
yury_mw |
6.2.2013, 12:08;
Ответить: yury_mw
Сообщение
#5
|
|
а как увеличить расстояние между картинками, когда они расположены в квадрат? сделать padding: 10px во все стороны Примерно так (поля состоят из 2х частей: 5px — margin между картинками и еще 5px — padding у внешнего блока .white): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>tst</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #000; text-align: center; } .white{ padding: 5px; display: inline-block; //display: inline; zoom: 1; background: #fff; } .line_of_img{ } .line_of_img a{ display: inline-block; //display: inline; zoom: 1; margin: 5px; } .line_of_img a img{ border: none; } </style> </head> <body> <div class="white"> <div class="line_of_img"> <a href="#"><img src="aa0.jpg"></a> <a href="#"><img src="aa0.jpg"></a> </div> <div class="line_of_img"> <a href="#"><img src="aa0.jpg"></a> <a href="#"><img src="aa0.jpg"></a> </div> </div> </html> На всякий случай отцентровал квадрат с картинками. Если этого не требуется можно убрать свойства display: inline-block; //display: inline; zoom: 1; у класса .white и text-align: center; у body. Свойства display: inline; нужны для ИЕ6 и их правильнее подключать отдельным файлом условными комментариями, чтобы их видел только он (а не как у меня, с помощью хака).
zoom: 1; |
|
|
WebMasterOleg |
29.3.2013, 9:54;
Ответить: WebMasterOleg
Сообщение
#6
|
|
А почему display: inline-block;? У этого свойства проблемы с кроссбраузерностью. Там будут отступы лишние. И еще могут сверху отступы добавиться. Может проще использовать float:left; для каждого изображения? А под ними использовать блог с очисткой пространства clear:both; по всей ширине? Я лишь предложил))
|
|
|
yury_mw |
29.3.2013, 11:15;
Ответить: yury_mw
Сообщение
#7
|
|
* В приведенном примере проблема с кроссбраузерностью решена (о чем кстати сказано специально) комбинацией css-свойств:
display: inline-block; * Как выше было сказано display: inline-block; использовано для случая последующей центровки, блоки с float:left; отцентровать не получится. * Блок с clear:both; — лишний с точки зрения семантики. |
|
|
WebMasterOleg |
29.3.2013, 11:59;
Ответить: WebMasterOleg
Сообщение
#8
|
|
|
А, ну если так то да. Не внимательно прочитал) Хотя еще можно по-изощряться и сделать верстку более удобной.
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
[ИЩУ] Человека для сбора картинок | 4 | rokot | 3214 | 4.9.2018, 10:05 автор: Том77 |
|
Ссылки с эро картинок хочется | 2 | RMak | 4061 | 4.2.2018, 23:19 автор: Kriya |
|
Поиск картинок и описания Фотошоп или powerpoint |
1 | scorper | 1896 | 8.9.2017, 10:46 автор: scorper |
|
Работа по поиску картинок и ссылок Работа для тех, кто онлайн, "между делом", мониторинг |
0 | nikolenko2008 | 1693 | 28.8.2016, 14:26 автор: nikolenko2008 |
|
Требуется исполнитель для отрисовки: иконок и картинок. | 0 | Seo-optimist | 2407 | 3.10.2015, 16:02 автор: Seo-optimist |
Текстовая версия | Сейчас: 29.3.2024, 12:58 |