ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прорыв в вёрстке плавающих блоков |-%
25 сообщений из 29, страница 1 из 2
  1  все
Прорыв в вёрстке плавающих блоков |-%
    #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:29
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38716858
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Что нужно получить:
...
Рейтинг: 0 / 0
10.08.2014, 20:30
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #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, 00:40
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #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, 08:45
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717032
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Откуда у вас 304-то? 300 же.
...
Рейтинг: 0 / 0
11.08.2014, 10:34
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717037
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Блин. Вся ночь впустую.
Высота жёлтого блока зависит от его содержимого и заранее неизвестна. Т.е. "упираться" в жёлтый блок могут и 2 красных блока, и 5 и 10. Я же написал, что известен только один размер - ширина жёлтого блока. Но НЕ его высота.

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

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

выложите, пожалуйста, решение.
...
Рейтинг: 0 / 0
11.08.2014, 12:47
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717185
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
user89 , а как же помучаться ?
...
Рейтинг: 0 / 0
11.08.2014, 12:52
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #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:01
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717268
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
HomeCoderВ Silverlight такого говна нет и всё получается достаточно просто и быстро - XAML рулит и педалит и закапывает ваш HTML с CSS живьём.Ещё один ниасилил .
...
Рейтинг: 0 / 0
11.08.2014, 13:57
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717510
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторНе то, чтобы я не смог осилить забивание гвоздей неподходящими инструментами, типа микроскопов... Но просто чувствуешь себя немного не в своей тарелке, когда всё таки приходится садиться за HTML/CSS/JavaScript и делать это. Но вы продолжайте использовать гуано и гордиться этим.Не более, чем пропаганда всякого рода говнонашлёпок. Вначале изучите HTML/CSS/JS и только потом Ваше мнение приобретёт хоть какой-то вес. А пока всё что Вы говорите - не выходит за рамки "я этого не знаю, поэтому оно - говно" .
...
Рейтинг: 0 / 0
11.08.2014, 17:19
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717583
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
HomeCoderЛюди делают высоконагруженные системы, летают в космос, а тут на хатэмээле не могут справиться с четырьмя красными квадратиками .Что из этого делаешь ты? Выделенное?
...
Рейтинг: 0 / 0
11.08.2014, 18:40
| Ответить | Цитировать | Написать  
Прорыв в вёрстке плавающих блоков |-%
    #38717588
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
HomeCoderskyANAпропущено...
Что из этого делаешь ты? Выделенное?
Не пытайся меня запутать и свернуть с темы!

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

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

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


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