Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #7

    Алексей111
    Очков активности: 39 6 тем, 8 сообщений, 1 балл репутации

  • Фотография AnnaYa
    #8

    AnnaYa (topbase.ru)
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

  • Фотография Developer
    #9

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


Расположение картинок

#1 Sleepwalker

Sleepwalker
  • Неактивные
  • 202 сообщений
  • Репутация: 3
0

Отправлено 29 January 2013 - 09:49

Есть 5 картинок - ссылок (20*20px) нужно их расположить в ряд.
И 4 картинки точно таких же их нужно в 2 ряда (квадрат).
В данный момент они вписаны в тег "таблица", но хотелось бы чтоб они были на белом фоне.
Как лучше расположить (каким тегом)?

 

 

  • 0

#2 maksim-hub

maksim-hub
  • Пользователь
  • 302 сообщений
  • Репутация: 25

Отправлено 29 January 2013 - 09:56

не совсем понятно о чем речь.
картинки при перечислении и так вряд будут.
а квадрат можно две картинки - перенос - две картинки

<div style="float:left"></div>...<div></div>
<div style="float:left"></div><div></div>
<div style="float:left;clear:both"></div><div></div>

  • 0

#3 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 29 January 2013 - 17:34

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

  • 1

#4 Sleepwalker

Sleepwalker
    Topic Starter
  • Неактивные
  • 202 сообщений
  • Репутация: 3

Отправлено 06 February 2013 - 09:25

а как увеличить расстояние между картинками, когда они расположены в квадрат?
сделать padding: 10px во все стороны
  • 0

#5 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 06 February 2013 - 11:08

а как увеличить расстояние между картинками, когда они расположены в квадрат? сделать 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;
  zoom: 1;
нужны для ИЕ6 и их правильнее подключать отдельным файлом условными комментариями, чтобы их видел только он (а не как у меня, с помощью хака).
  • 0

#6 WebMaster

WebMaster
  • Неактивные
  • 97 сообщений
  • Репутация: 3

Отправлено 29 March 2013 - 08:54

А почему display: inline-block;? У этого свойства проблемы с кроссбраузерностью. Там будут отступы лишние. И еще могут сверху отступы добавиться. Может проще использовать float:left; для каждого изображения? А под ними использовать блог с очисткой пространства clear:both; по всей ширине? Я лишь предложил))
  • 0

#7 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 29 March 2013 - 10:15

* В приведенном примере проблема с кроссбраузерностью решена (о чем кстати сказано специально) комбинацией css-свойств:

display: inline-block;
//display: inline;
zoom: 1;
* Как выше было сказано display: inline-block; использовано для случая последующей центровки, блоки с float:left; отцентровать не получится.
* Блок с clear:both; — лишний с точки зрения семантики.
  • 1

#8 WebMaster

WebMaster
  • Неактивные
  • 97 сообщений
  • Репутация: 3

Отправлено 29 March 2013 - 10:59

А, ну если так то да. Не внимательно прочитал) Хотя еще можно по-изощряться и сделать верстку более удобной.
  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru