Выравнивание по ширине

@vx5 · Регистрация: 04.09.2010

Студворк — интернет-сервис помощи студентам

Имеется таблица, в одной из ячеек которой содержится ряд картинок. С выравниванием по центру интервалы получаются сильно разные, хотел сделать выравнивание по ширине, но как-то браузеры(Chrome, Opera, другие не проверял) неадекватно реагируют на это - выравнивают либо по центру либо по левому краю.

HTML5
1
<table><tr><td align='justify'><img src='img1.jpg'><img src='img2.jpg'><img src='img3.jpg'><img src='img4.jpg'></td></tr></table>

Стиль страницы вообще прописывал в CSS-файле, но когда с его помощью сделать такое выравнивание не получилось решил попробовать отредактировать на отдельной ячейке - так же фигня..)
В CSS это выглядело так:

HTML5
1
text-align: justify;

@wachburn · 18.01.2011, 19:54

а размеры картинок одинаковые? и почему нельзя применить стиль margin-left к картинкам?

@vx5 · 18.01.2011, 20:07 **[ТС]**

размер картинок разный.

и почему нельзя применить стиль margin-left к картинкам?

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

Добавлено через 5 минут
а хотя сейчас попробую отступ, хотя он по-моему не масштабируется, получится картинка просто вылезет за край..

@wachburn · 18.01.2011, 20:58

ну так отпишись, интересно

@vx5 · 19.01.2011, 00:29 **[ТС]**

Сообщение от wachburn

ну так отпишись, интересно

как и писал выше, с мастабированием косяк.. но даже если рассматривать статический размер картинок, у меня на 1280х1024 результат идеален, а вот при сжатии окна, допустим до 800, внизу сразу появляется ползунок и часть страницы тупо за пределами экрана=( отступ пробовал задавать и пикселями и процентами.

Добавлено через 1 минуту
есть еще какие идеи ?

@wachburn · 19.01.2011, 00:42

у меня просто эта картина в голове плохо укладывается, что это у тебя за изображения такие в таблице по 1280х1024 да еще и по 3 штуки в одной ячейке))

@vx5 · 19.01.2011, 00:46 **[ТС]**

1280х1024

я говорил про разрешение экрана. при отступе плохое масштабирование - на разных экранах будет по разному. так изображения маленькие порядка 100-150 пикселей

@wachburn · 19.01.2011, 19:02

max и min-width может для ячеек ставить? просто в слепую трудно ориентироваться что там у тебя с кодом

@vx5 · 19.01.2011, 21:07 **[ТС]**

Сообщение от wachburn

max и min-width может для ячеек ставить? просто в слепую трудно ориентироваться что там у тебя с кодом

по-моему задача описана достаточно четко. есть 3 картинки неодинакового размера. необходимо сравнять расстояния между ними так, чтобы расстояние масштабировалось в соответствующих пропорциях при изменении размера окна. Как я понял, выравнивание по ширине применяется только к тексту, а по центру/левому краю/правому краю к чему угодно, что как-то странно - и то и то есть значения одного и того же параметра.

Добавлено через 5 минут
собственно главное эффект, способ реализации может быть любой. Изначально пробовал создавать таблицу шириной 100% и по рисунку в каждой ячейке. В результате размеры ячеек вроде бы и одинаковые, но вот расстояния от картинок до краев ячейки получается во всех случаях разное. После этого стал пробовать без таблицы, как раз первой мыслью стало выравнивание по ширине, но вот незадача, к рисункам почему-то не применяется.

Добавлено через 2 минуты

Сообщение от wachburn

max и min-width может для ячеек ставить?

смутно представляю, как это мне поможет. но попробую..

@wachburn · 19.01.2011, 21:15

Сообщение от vx5

а вот при сжатии окна, допустим до 800, внизу сразу появляется ползунок и часть страницы тупо за пределами экрана=( отступ пробовал задавать и пикселями и процентами.

Значит элемент контейнер имеет фиксированную ширину, либо содержимое (картинки) действительно не влазят в размер 800px. А ты хочешь, чтоб ты мог сжать страницу до размера 300px и у тебя все влезло?
Можно весь код посмотреть если он не очень большой?

@vx5 · 19.01.2011, 21:38 **[ТС]**

CSS:

CSS
1
.style{margin-left: 30%;}

HTML:

HTML5
1
2
3
4
5
6
7
8
9
<table width=100%>
<tr>
<td>
<img class='style' src='img1.jpg' width = 100  height= 150/>
<img class='style' src='img2.jpg' width = 130  height= 150/>
<img class='style' src='img3.jpg' width = 90  height= 150/>
</td>
</tr>
</table>

между рисунками свободного места дофига, просто оно отдано под отступ и не хочет масштабироваться.

@wachburn · 19.01.2011, 22:06

если в этом случае использовать процентные значения для полей, то браузер будет вычислять их из того элемента, который содержит таблицу. Таблица в каком контейнере у тебя? и какой размер она имеет? если фиксированный, то масштабироваться они не будут.

@vx5 · 19.01.2011, 22:10 **[ТС]**

если в этом случае использовать процентные значения для полей, то браузер будет вычислять их из того элемента, который содержит таблицу. Таблица в каком контейнере у тебя? и какой размер она имеет? если фиксированный, то масштабироваться они не будут.

рассматриваем конкретно данный случай. с обоих сторон от приведенного кода только боди. Отступ не масштабируется.

@wachburn · 19.01.2011, 22:15

Поправка, проценты будут вычисляться по родительскому элементу, у картинки это <td>. А при изменении окна браузере ячейка будет иметь одинаковый размер: размер всех изображений + поля = размер ячейки. Следовательно они масштабироваться не будут. А вообще не советую в процентах поля устанавливать. Здесь какаято неопределенность получается у браузера.

@vx5 · 19.01.2011, 23:31 **[ТС]**

Сообщение от wachburn

А вообще не советую в процентах поля устанавливать.Здесь какаято неопределенность получается у браузера.

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

HTML5
1
2
3
4
5
6
<body>
<img class='style' src='img1.jpg' width = 100  height= 150/>
<img class='style' src='img2.jpg' width = 130  height= 150/>
<img class='style' src='img3.jpg' width = 90  height= 150/>
<img>
</body>

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

Добавлено через 6 минут
то что отступы не дают должного результата, было сказано еще в третьем сообщении. может есть еще идеи?

@wachburn · 19.01.2011, 23:38

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

@vx5 · 20.01.2011, 00:35 **[ТС]**

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

логику понял. но мне кажется что % без проблема идет от старшего звена к низшему. Сначала берется от размера окна, потом дочерние элементы от него.

А насчет другого варианта, возможно задать картинкам фиксированные поля в пикселях

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

@wachburn · 20.01.2011, 00:56

Сообщение от vx5

мне кажется что % без проблема идет от старшего звена к низшему. Сначала берется от размера окна, потом дочерние элементы от него.

Нет, от размера окна будет зависеть только например контейнер <div> который вложен в <body>. А поле картинки высчитывается только из размера ячейки, окно здесь не причем.

Сообщение от vx5

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

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

@vx5 · 20.01.2011, 01:52 **[ТС]**

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

можно пример? я не понял твою фразу о полях картинки, что ты подразумеваешь под словом поле? как я понимаю, поле - пространство в котором существует картинка. но чтоб задать его каждой картинки отдельно надо каждую пихать в ячейку таблицы(или какие контейнеры еще позволяют задавать размеры?), тогда у каждой картинки будет свое поле, но опять же в случае % ситуация снизу, а в случае пикселей - имеем жесткую связку четко под определенный размер окна.

Сообщение от wachburn

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

проблема такого подхода была описана выше.

Сообщение от vx5

Изначально пробовал создавать таблицу шириной 100% и по рисунку в каждой ячейке. В результате размеры ячеек вроде бы и одинаковые, но вот расстояния от картинок до краев ячейки получается во всех случаях разное.

@wachburn · 20.01.2011, 02:04

поле - это свойство margin.

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 09.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	18.01.2011, 19:54
	а размеры картинок одинаковые? и почему нельзя применить стиль margin-left к картинкам? 1

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	18.01.2011, 20:58
	ну так отпишись, интересно 0

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	19.01.2011, 00:42
	у меня просто эта картина в голове плохо укладывается, что это у тебя за изображения такие в таблице по 1280х1024 да еще и по 3 штуки в одной ячейке)) 0

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	19.01.2011, 19:02
	max и min-width может для ячеек ставить? просто в слепую трудно ориентироваться что там у тебя с кодом 1

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	19.01.2011, 22:06
	если в этом случае использовать процентные значения для полей, то браузер будет вычислять их из того элемента, который содержит таблицу. Таблица в каком контейнере у тебя? и какой размер она имеет? если фиксированный, то масштабироваться они не будут. 0

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	19.01.2011, 22:15
	Поправка, проценты будут вычисляться по родительскому элементу, у картинки это <td>. А при изменении окна браузере ячейка будет иметь одинаковый размер: размер всех изображений + поля = размер ячейки. Следовательно они масштабироваться не будут. А вообще не советую в процентах поля устанавливать. Здесь какаято неопределенность получается у браузера. 1

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	19.01.2011, 23:38
	Давай на ты. Я имею ввиду использование процентов для полей... я както избегаю такого. Насчет неопределенности: размер ячейки вычисляется по размеру отступов и размеру изображений. Следовательно, когда ты меняешь размер окна, ячейке нужно подстроиться под этот размер, но она видимо не может подобрать размер, т.к. вычисляется по размеру изображений и отступов этих изображений, которые вычисляются по размеру самой ячейки. Вот тут и путаница. А насчет другого варианта, возможно задать картинкам фиксированные поля в пикселях, поместить их в дивы, а див расположить по центру 0

@wachburn 19 / 19 / 4 Регистрация: 29.10.2009 Сообщений: 150
	20.01.2011, 02:04
	поле - это свойство margin. 1