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

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

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@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