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

Реферальная программа Мегаплана

Партнерская программа Kredov

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

#1 Sleepwalker

Sleepwalker
  • Пользователь
  • 202 сообщений
  • Репутация: 3
0

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

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

 

 

  • 0

#2 maksim-hub

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

Отправлено 29 Январь 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
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 29 Январь 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 Февраль 2013 - 09:25

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

#5 yury

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

Отправлено 06 Февраль 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 Март 2013 - 08:54

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

#7 yury

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

Отправлено 29 Март 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 Март 2013 - 10:59

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

robot

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


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