Нужно блочные элементы сделать вроде эффекта text-align:justify; у текта. Как это лучшесделать? + - HTML и CSS

Ghjy06 · 26.07.2013, 02:44

Существует родительский блок он резиновый но ограниченный min- и max-width, в нем есть несколько блочных плавающих элементов, в сумме их ширена равна минимальной ширине родительского блока (резинового), но когда окно браузера расширяется эти элементы остаются на месте, и появляется пустое не заполненное пространство.
Я хочу, чтобы между этими элементами появлялись отступы (margin), при расширении родительского блока (окна браузера), что-то типа эффекта text-align:justify у текста.
Пробовал задать margin в % но тогда при уменьшении размера дочерний элемент переносится на другую строчку и текст не не по центру растягивается (блоки прижаты к левой стороне но увеличивается только margin). Что посоветуете& Вот код:

Код HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>блок для видео</title>
<style type="text/css">
#conteiner {
    min-width:608px;
    max-width:800px;
    height:402px;
    border:1px solid #000;
    margin:auto;
}
.icon_center_kurs {
    height: 200px; 
    border: 1px solid #000;
    width: 150px;
    text-align: center;
    float:left;
        }
</style>
</head>
<body>
<div id="conteiner">
    <div class="center_kurs_item">
        <a href="#" class="icon_center_kurs">Видео  №1</a>
        <a href="#" class="icon_center_kurs" >Видео  №2</a>
        <a href="#" class="icon_center_kurs" >Видео  №3</a>
        <a href="#" class="icon_center_kurs">Видео №4</a>
    </div>
</div>
</body>
</html>

Сам додумался, если 3 элемента на странице то можно одному задать float:right; второму float:left;, а третий оставить как есть, тогда будет нужный эффект. но как быть если элементов больше 3-х?

Fenex · 26.07.2013, 11:56

Код HTML:

<html>
<head>
<meta charset="utf-8">
<title>блок для видео</title>
<style type="text/css">
#conteiner {
    min-width:608px;
    max-width:800px;
    height:402px;
    border:1px solid #000;
    margin:auto;
}
.icon_center_kurs {
    height: 200px; 
    border: 1px solid #000;
    width: 150px;
    text-align: center;
    float:left;
}
.center_kurs_item div {
	width: 24%;
	display: inline-block;
}
</style>
</head>
<body>
<div id="conteiner">
    <div class="center_kurs_item">
        <div><a href="#" class="icon_center_kurs">Видео  №1</a></div>
        <div><a href="#" class="icon_center_kurs" >Видео  №2</a></div>
        <div><a href="#" class="icon_center_kurs" >Видео  №3</a></div>
        <div><a href="#" class="icon_center_kurs">Видео №4</a></div>
    </div>
</div>
</body>
</html>

Naive · 26.07.2013, 13:31

Чтобы блоки вели себя как слова в тексте нужно что сделать? Правильно, сделать их строчно-блочными!

ps. Такое ощущение, что я захожу на форум с одной целью написать

Код:

display:inline-block;

Лубышев · 26.07.2013, 20:26

забыл про ослика) он не понимать этого

Цитата:

ps. Такое ощущение, что я захожу на форум с одной целью написать

+1

Ghjy06 · 26.07.2013, 23:16

Цитата:

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

Код HTML:

<html>
<head>
<meta charset="utf-8">
<title>блок для видео</title>
<style type="text/css">
#conteiner {
    min-width:608px;
    max-width:800px;
    height:402px;
    border:1px solid #000;
    margin:auto;
}
.icon_center_kurs {
    height: 200px; 
    border: 1px solid #000;
    width: 150px;
    text-align: center;
    float:left;
}
.center_kurs_item div {
	width: 24%;
	display: inline-block;
}
</style>
</head>
<body>
<div id="conteiner">
    <div class="center_kurs_item">
        <div><a href="#" class="icon_center_kurs">Видео  №1</a></div>
        <div><a href="#" class="icon_center_kurs" >Видео  №2</a></div>
        <div><a href="#" class="icon_center_kurs" >Видео  №3</a></div>
        <div><a href="#" class="icon_center_kurs">Видео №4</a></div>
    </div>
</div>
</body>
</html>

В общем мне нудо, чтобы блоки отражались не так:

А вот так (причем КРОСБРАУЗЕРНО) средствами CSS и блоки должны быть с фиксированной высотой и шириной:

Может кто-то сталкивался с подобной задачей или знает решение? - Подскажите.

Ghjy06 · 26.07.2013, 23:22

Цитата:

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

Чтобы блоки вели себя как слова в тексте нужно что сделать? Правильно, сделать их строчно-блочными!

ps. Такое ощущение, что я захожу на форум с одной целью написать

Код:

display:inline-block;

text-align:justify; все равно не сработает. Может я не понял, что вы имеете ввиду? - Исправьте мой пример, если Вас не затруднит.

Ghjy06 · 26.07.2013, 23:25

Вы единственный онлайн. Может вы покажете на примере? - Вы вроде бы поняли о чем говорил Naive.

Naive · 27.07.2013, 11:27

http://jsfiddle.net/YkxvA/
О чем говорят Наивы.

Ghjy06 · 28.07.2013, 03:29

Да, Наивы красавцы. Спасибо интересно было узнать такое решение. Но как выяснилось, мне оно слегка не подходит. Т.к. Растягивание объектов на всю длину строки происходит только тогда, когда родительский блок маленькой ширины, в противном случае, наблюдается такой же некрасивый отступ справа и выравнивание по правому краю.
Пожалуй воспользуюсь заданием обертки в процентах (слегка доработал под свои нужды вариант предложенный "Fenex"). Всем спасибо за обсуждения и предложения. Хороших выходных

26.07.2013, 02:44	#1
Ghjy06 Регистрация: 26.07.2013 Сообщений: 5	Нужно блочные элементы сделать вроде эффекта text-align:justify; у текта. Как это лучшесделать? + Существует родительский блок он резиновый но ограниченный min- и max-width, в нем есть несколько блочных плавающих элементов, в сумме их ширена равна минимальной ширине родительского блока (резинового), но когда окно браузера расширяется эти элементы остаются на месте, и появляется пустое не заполненное пространство. Я хочу, чтобы между этими элементами появлялись отступы (margin), при расширении родительского блока (окна браузера), что-то типа эффекта text-align:justify у текста. Пробовал задать margin в % но тогда при уменьшении размера дочерний элемент переносится на другую строчку и текст не не по центру растягивается (блоки прижаты к левой стороне но увеличивается только margin). Что посоветуете& Вот код: Код HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>блок для видео</title> <style type="text/css"> #conteiner { min-width:608px; max-width:800px; height:402px; border:1px solid #000; margin:auto; } .icon_center_kurs { height: 200px; border: 1px solid #000; width: 150px; text-align: center; float:left; } </style> </head> <body> <div id="conteiner"> <div class="center_kurs_item"> <a href="#" class="icon_center_kurs">Видео №1</a> <a href="#" class="icon_center_kurs" >Видео №2</a> <a href="#" class="icon_center_kurs" >Видео №3</a> <a href="#" class="icon_center_kurs">Видео №4</a> </div> </div> </body> </html> Сам додумался, если 3 элемента на странице то можно одному задать float:right; второму float:left;, а третий оставить как есть, тогда будет нужный эффект. но как быть если элементов больше 3-х? Последний раз редактировалось Ghjy06; 26.07.2013 в 03:08.

26.07.2013, 13:31	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Чтобы блоки вели себя как слова в тексте нужно что сделать? Правильно, сделать их строчно-блочными! ps. Такое ощущение, что я захожу на форум с одной целью написать Код: `display:inline-block;` Alar, верни репу!

27.07.2013, 11:27	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	http://jsfiddle.net/YkxvA/ О чем говорят Наивы. Alar, верни репу!

28.07.2013, 03:29	#9
Ghjy06 Регистрация: 26.07.2013 Сообщений: 5	Да, Наивы красавцы. Спасибо интересно было узнать такое решение. Но как выяснилось, мне оно слегка не подходит. Т.к. Растягивание объектов на всю длину строки происходит только тогда, когда родительский блок маленькой ширины, в противном случае, наблюдается такой же некрасивый отступ справа и выравнивание по правому краю. Пожалуй воспользуюсь заданием обертки в процентах (слегка доработал под свои нужды вариант предложенный "Fenex"). Всем спасибо за обсуждения и предложения. Хороших выходных Последний раз редактировалось Ghjy06; 28.07.2013 в 03:31.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
нужно закрыть предыдущее окно. Как это сделать?	Lodyr	Общие вопросы по Java, Java SE, Kotlin	1	17.07.2012 11:51
нужно перевести прогу из си в ассеблер как это сделать?	Dimasik73	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	2	16.04.2012 19:17
text-aling:justify , Не могу разобраться почему не работает	F1ernandes	HTML и CSS	0	28.01.2010 11:55

26.07.2013, 23:25	#7
Ghjy06 Регистрация: 26.07.2013 Сообщений: 5	Вы единственный онлайн. Может вы покажете на примере? - Вы вроде бы поняли о чем говорил Naive.