Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 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.
Ghjy06 вне форума Ответить с цитированием
Старый 26.07.2013, 11:56   #2
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Код 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>
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 26.07.2013, 13:31   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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

ps. Такое ощущение, что я захожу на форум с одной целью написать
Код:
display:inline-block;
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 26.07.2013, 20:26   #4
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

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

Цитата:
ps. Такое ощущение, что я захожу на форум с одной целью написать
+1
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 26.07.2013, 23:16   #5
Ghjy06
 
Регистрация: 26.07.2013
Сообщений: 5
По умолчанию

Цитата:
Сообщение от 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:23.
Ghjy06 вне форума Ответить с цитированием
Старый 26.07.2013, 23:22   #6
Ghjy06
 
Регистрация: 26.07.2013
Сообщений: 5
По умолчанию

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

ps. Такое ощущение, что я захожу на форум с одной целью написать
Код:
display:inline-block;
text-align:justify; все равно не сработает. Может я не понял, что вы имеете ввиду? - Исправьте мой пример, если Вас не затруднит.
Ghjy06 вне форума Ответить с цитированием
Старый 26.07.2013, 23:25   #7
Ghjy06
 
Регистрация: 26.07.2013
Сообщений: 5
По умолчанию

Вы единственный онлайн. Может вы покажете на примере? - Вы вроде бы поняли о чем говорил Naive.
Ghjy06 вне форума Ответить с цитированием
Старый 27.07.2013, 11:27   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

http://jsfiddle.net/YkxvA/
О чем говорят Наивы.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 28.07.2013, 03:29   #9
Ghjy06
 
Регистрация: 26.07.2013
Сообщений: 5
По умолчанию

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

Последний раз редактировалось Ghjy06; 28.07.2013 в 03:31.
Ghjy06 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужно закрыть предыдущее окно. Как это сделать? 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