Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прорыв в вёрстке плавающих блоков |-% / 25 сообщений из 29, страница 1 из 2
  1  все
10.08.2014, 20:29
    #38716857
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
CSS настолько "могуч", что позволяет реализовать самые извращенские структуры, и настолько убог, что не позволяет получить элементарных комбинаций.

Кто считает себя гуру в html/css-вёрстке, предлагаю решить такую задачу.
Вот базовый html-код:
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<html><head>  
<style>

.right { float:right; }
.left { float:left; }

.yellow {    
    width: 300px; height: 100px;
    background: yellow;
} 
.red_wrapper {
    background: green;
    padding: 3px;
    margin-bottom: 2px;
} 
.red {
    width: 50%;
    height: 70px;
    background: red;
}
</style>
</head>

<body>
    <div class="yellow right"></div>

    <div class="red_wrapper"><div class="red"></div></div>
    <div class="red_wrapper"><div class="red"></div></div>
    <div class="red_wrapper"><div class="red"></div></div>
    <div class="red_wrapper"><div class="red"></div></div>
    <div class="red_wrapper"><div class="red"></div></div>
</body></html>

Задача. Сделать так, чтобы красные блоки обтекали жёлтый плавающий блок как показано на рисунке ниже. Т.е. жёлтый блок должно обтекать не inline-содержимое красных блоков, а сами красные блоки.

Условия:
1. Ширина плавающего (жёлтого) блока фиксирована
2. Ширина зелёных и красных блоков - резиновая
3. Скрипты использовать нельзя

Зелёные блоки по большому счёту не нужны. Я их добавил для упрощения задачи.
Задачу можно решать любым сколь-угодно извращенским способом. Главное - соблюсти указанные условия.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.08.2014, 20:30
    #38716858
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Что нужно получить:
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 00:40
    #38716910
скукотища
скукотища
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Cyrax_02,
 
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
.right { float:right; }
.left { float:left; }

.yellow {    
    width: 300px; height: 100px;
    background: yellow;
} 
.red_wrapper {
    background: green;
    padding: 3px;
    margin-bottom: 2px;
}
.red_wrapper:nth-child(-n+3) .red {
/* REM: 3 == ceil(.yellow.height / .red.height) + count(ignored_previous_siblings) == ceil(100px/70px) +1 */
    width: calc(100% - 304px);
} 
.red {
    /* width: 50%; */
    height: 70px;
    background: red;
}


...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 08:45
    #38716959
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
скукотища
Код: css
1.
2.
3.
4.
.red_wrapper:nth-child(-n+3) .red {
/* REM: 3 == ceil(.yellow.height / .red.height) + count(ignored_previous_siblings) == ceil(100px/70px) +1 */
    width: calc(100% - 304px);
}


Может просто использовать

Код: css
1.
margin-right: 304px;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 10:34
    #38717032
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Откуда у вас 304-то? 300 же.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 10:39
    #38717037
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Блин. Вся ночь впустую.
Высота жёлтого блока зависит от его содержимого и заранее неизвестна. Т.е. "упираться" в жёлтый блок могут и 2 красных блока, и 5 и 10. Я же написал, что известен только один размер - ширина жёлтого блока. Но НЕ его высота.

Неужели вы подумали, что я до margin-right или nth-child не догадался бы ?

P.S. А вот теперь скукотища , видимо, должен оправдать свой ник.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 12:42
    #38717173
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Задачу решил. На чистом css2. Без скриптов.
Решение элементарное и красивое.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 12:47
    #38717180
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Cyrax_02,

выложите, пожалуйста, решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 12:52
    #38717185
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
user89 , а как же помучаться ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 13:01
    #38717194
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Cyrax_02,

я помучался   Крутил и таблицами, и дивами, и float и absolute. Вариант, на котором забросил
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
<html><head>  
<style>
.yellow {    
	position:absolute;
	width:300px; 
	height:100px;
	background:yellow;
	right:0;
	opacity:0.4;
	display:inline;
} 
.red {
	width:100%;
	height: 70px;
	background: red;
	border:1px solid green;
	display:inline-block;
}
</style>
</head>

<body>
<div class="yellow right"></div>

<div class="red">11111111</div>
<div class="red">222222222</div>
<div class="red">3333333</div>
<div class="red">4444444</div>
<div class="red">5555555555</div>
</body></html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 13:57
    #38717268
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
HomeCoderВ Silverlight такого говна нет и всё получается достаточно просто и быстро - XAML рулит и педалит и закапывает ваш HTML с CSS живьём.Ещё один ниасилил .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 17:19
    #38717510
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
авторНе то, чтобы я не смог осилить забивание гвоздей неподходящими инструментами, типа микроскопов... Но просто чувствуешь себя немного не в своей тарелке, когда всё таки приходится садиться за HTML/CSS/JavaScript и делать это. Но вы продолжайте использовать гуано и гордиться этим.Не более, чем пропаганда всякого рода говнонашлёпок. Вначале изучите HTML/CSS/JS и только потом Ваше мнение приобретёт хоть какой-то вес. А пока всё что Вы говорите - не выходит за рамки "я этого не знаю, поэтому оно - говно" .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 18:40
    #38717583
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
HomeCoderЛюди делают высоконагруженные системы, летают в космос, а тут на хатэмээле не могут справиться с четырьмя красными квадратиками .Что из этого делаешь ты? Выделенное?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 18:53
    #38717588
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
HomeCoderskyANAпропущено...
Что из этого делаешь ты? Выделенное?
Не пытайся меня запутать и свернуть с темы!

В чём запутать и куда свернуть? Тебе же решение озвученной автором проблемы в принципе не интересно, ты потроллить зашёл.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 19:13
    #38717603
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
авторЛюди делают высоконагруженные системы, летают в космос, а тут на хатэмээле не могут справиться с четырьмя красными квадратиками.Улыбнуло, как люди на вашем silverlight в космос летают. В высоконагруженных системах не используют дополнительные программные прослойки типа плагинов и не тешатся визуальными генераторами интерфейсов.

Что касается красных квадратиков. Приведи silverlight/XAML-код, решающий сабжевую задачу. Справишься ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 21:25
    #38717670
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
судя по статистике HomeCoder , он сюда заходит пиской хвастаться и предложить всем с ним мереться.....
а то что кроме окон существуют еще и некоторые оси, на которых его Silverlight ни на какую письку не нужен, он не догадывается
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 21:33
    #38717675
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
и судя по 16427012 его писька стремится к 17:30
отсюда и напыщенность - стремление приподнять орган....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2014, 21:37
    #38717679
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
судя по всему, он под вечер упоролся, и это в понедельник... видимо жизнь дала трещину
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 11:05
    #38717889
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
авторТы сначала сформулируй эту задачу нормально. А то на картинке какая-то муть.
Классический троль.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 11:27
    #38717912
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Мини-досье на HomeCoder'а
Студент. В июне 2014 года сдал выпускные экзамены. Устроился на работу и "почувствовал", какой он крутой чел.
С профессиональными форумами познакомился тоже недавно. В силу своей убогости и ограниченности именно на форумах нашёл площадку для самореализации. До тех пор, пока не придёт осознание своей никчёмности, будет продолжать троллить на форумах и пропагандировать этот единственный инструмент, позволяющий ему чувствовать свою значимость во взрослом мире.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 11:29
    #38717916
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
HomeCoderskyANAсудя по всему, он под вечер упоролся, и это в понедельник... видимо жизнь дала трещину
Ну чего ты ругаешься? Постыдился бы!Чего мне стыдиться-то? Какое из написанных мною слов относится к табуизированной лексике?

З.Ы. тебе бы не мешало постыдиться своего невежества.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 12:02
    #38717959
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Cyrax_02 Мини-досье на HomeCoder'а
Студент. В июне 2014 года сдал выпускные экзамены. Устроился на работу и "почувствовал", какой он крутой чел.
С профессиональными форумами познакомился тоже недавно. В силу своей убогости и ограниченности именно на форумах нашёл площадку для самореализации. До тех пор, пока не придёт осознание своей никчёмности, будет продолжать троллить на форумах и пропагандировать этот единственный инструмент, позволяющий ему чувствовать свою значимость во взрослом мире.какое счастье, что когда я покинул институт, интернеты в эту страну только-только просочились.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 13:35
    #38718122
xPhoenix
xPhoenix
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Братюни, где же решение на "чистом CSS2"?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 15:43
    #38718388
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
автор Мини-досье на HomeCoder'а
Студент. В июне 2014 года сдал выпускные экзамены. Устроился на работу и "почувствовал", какой он крутой чел.
С профессиональными форумами познакомился тоже недавно. В силу своей убогости и ограниченности именно на форумах нашёл площадку для самореализации. До тех пор, пока не придёт осознание своей никчёмности, будет продолжать троллить на форумах и пропагандировать этот единственный инструмент, позволяющий ему чувствовать свою значимость во взрослом мире.Немного ошибся. Оно ещё на работу не устроилось. К собеседованию готовится. Тренируется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2014, 16:55
    #38718571
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прорыв в вёрстке плавающих блоков |-%
Cyrax_02Оно ещё на работу не устроилось. К собеседованию готовится. Тренируется.
Аналогичный недавно был у нас...
28 лет... Окончил вуз... Женился недавно... Работал (по резюме) на 4-х предприятиях! Но рабочий стаж в сумме не превышает 12 месяцев...
На вопрос "Че так?", отвелил - де ситуации были не в его пользу...
Босс таки взял его.
Проработал у нас чуть более месяца и написал заявление об уходе, обвинив меня (начальника отдела) и своего руководителя (руководителя группы) в придирках к его тестовым заданиям (нужно ему было сделать телефонный справочник).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прорыв в вёрстке плавающих блоков |-% / 25 сообщений из 29, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 458ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446654]:
 0ms
get settings:
 6ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 146ms
get topic data:
 9ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 217ms
total:  458ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]