Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Неплавающий блок не обтекает плавающий блок / 10 сообщений из 10, страница 1 из 1
06.07.2014, 13:21
    #38688836
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Почему в нижеприведённом примере неплавающий блок block1 НЕ обтекает плавающий блок block2 , тогда как плавающие подблоки item в составе block1 обтекают block2 ?
Код: 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.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style>

.right { float:right; }
.left { float:left; }
.newline { clear: both; }

.block1 {
    width: auto;
    background: red;
    padding: 5px;
}
.block2 {    
    width: 300px;    
    background: yellow;
    padding: 5px;
}
.item         { background: grey; }
.block1 .item { width: 33% }
.block2 .item { width: 50% }

</style>
</head>

<body>

<div class="block2 right">
    <div class="item left"><span>Item</span></div>
    <div class="item left"><span>Item</span></div>
    <div class="newline"></div>
</div>

<div class="block1">
    <div class="item left"><span>Item</span></div>
    <div class="item left"><span>Item</span></div>
    <div class="item left"><span>Item</span></div>
    <div class="newline"></div>
</div>

</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.07.2014, 13:24
    #38688838
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Применительно к картинке:
Почему красный блок НЕ обтекает жёлтый блок, тогда как подблоки в красном блоке обтекают желтый блок ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.07.2014, 14:25
    #38688848
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Впрочем, почему красный блок занимает всю доступную ширину (если не указывать конкретной ширины) в потоке, понятно - это свойство всех неплавающих блоков (жёлтый блок выводится из потока => красный блок его не "видит"). Т.е. вопрос стоит перефразировать:
Как сделать так, чтобы красный блок обтекал жёлтый ?

Конкретную (или процентную) ширину красному блоку задавать нельзя, т.к он должен быть резиновым (расширяться до жёлтого блока).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.07.2014, 14:38
    #38688849
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Красному блоку задавать margin-right, равный ширине жёлтого блока, нельзя. Т.к. в этом случае ширина жёлтого блока будет фигурировать в CSS в 2 местах.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.07.2014, 19:46
    #38688932
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Похоже, это возможно только табличной вёрсткой...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2014, 13:55
    #38689411
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Cyrax_02 Почему красный блок НЕ обтекает жёлтый блок, тогда как подблоки в красном блоке обтекают желтый блок ?
Начнем с того, чтоЖ
- "не плавающий" блок никого и не обтекает по определению
- спаны не есть блоки
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2014, 13:57
    #38689415
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
krvsa- спаны не есть блоки
Тут уже я просмотрел...

Дык плавающие блоки и должны плавать, обтекая друг друга, так же по определению.

Т.ч. по примеру никакого криминала.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2014, 14:09
    #38689433
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Так вот это обойти нельзя при использовании блочной вёрстки:
авторКрасному блоку задавать margin-right, равный ширине жёлтого блока, нельзя. Т.к. в этом случае ширина жёлтого блока будет фигурировать в CSS в 2 местах .
Т.е. можно сделать так, чтобы ширина жёлтого блока фигурировала в CSS только в одном месте ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2014, 15:58
    #38689571
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Cyrax_02Т.е. можно сделать так, чтобы ширина жёлтого блока фигурировала в CSS только в одном месте ?LESS?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2014, 17:11
    #38689636
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Неплавающий блок не обтекает плавающий блок
Без препроцессоров чисто средствами css никак нельзя ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Неплавающий блок не обтекает плавающий блок / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 444ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446925]:
 0ms
get settings:
 7ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 149ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 228ms
total:  444ms
x
x
Закрыть


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