Помогите расположить div'ы средствами css

274

happy-joker

1 июля 2011, 12:23

1015

Что необходимо сделать, показано на рисунке.

Внешняя и внутренняя рамки - это границы элементов div.

Нужно малый div расположить в левом нижнем углу большого div. Текст большого div при этом должен обтекать, как показано на рисунке.

Весть текст от начала и до конца выводится единым куском в cms вызовом соответствующей функции, поэтому нет возможности вставить код в любое место в тексте.

Возможно ли это реализовать средствами css, и как?

Если бы нужно было привязать к верхнему левому углу, то достаточно было бы прописать у малого div float:left, а как быть тут?

jpg example.jpg

77

Sergiko

1 июля 2011, 12:33

#1

Попробуйте к малому блоку div применить следующие правила:

float:left; top:100%;

Sergiko добавил 01.07.2011 в 16:36

забыл добавить position:absolute;

H

9

Haubergeon

1 июля 2011, 13:02

#2

Возможно ли это реализовать средствами css, и как?

Неа :) Нужного вам эффекта не получить

Разве что вы уверены, что последний параграф будет таким, что будет обтекать маленький блок, то ставьте маленькому блоку float: left и в верстке перед параграфом разместите

Слово не воробей. Все не воробей, кроме воробья!

HJ

274

happy-joker

1 июля 2011, 13:02

#3

Sergiko:
Попробуйте к малому блоку div применить следующие правила:

float:left; top:100%;

Sergiko добавил 01.07.2011 в 16:36
забыл добавить position:absolute;

Попробовал:


<HTML>
<HEAD>
<TITLE>test</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="generator" content="CuteHTML">
</HEAD>
<BODY>
<div style="width:400px; border: 2px solid black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div style="width:150px; border: 2px solid green; float:left; top:100%; position:relative;">
Съешь еще этих мягких французских булок, да выпей чаю!<br>
Съешь еще этих мягких французских булок, да выпей чаю Съешь еще этих мягких французских булок, да выпей чаю.
</div>

</div>
</BODY>
</HTML>

Получилось вот что, см скрин.

А при position:absolute зеленый div прибивает к самому низу страницы.

jpg example-01.jpg

HJ

274

happy-joker

1 июля 2011, 13:06

#4

Haubergeon:

Неа :) Нужного вам эффекта не получить

Вроде, что-то похожее с помощью top делается же: http://htmlbook.ru/css/top

Haubergeon:
Разве что вы уверены, что последний параграф будет таким, что будет обтекать маленький блок, то ставьте маленькому блоку float: left и в верстке перед параграфом разместите

Писал, что нет возможности вставить код в любое место в тексте. Только до или после.

H

9

Haubergeon

1 июля 2011, 13:13

#5

Вроде, что-то похожее с помощью top делается же: http://htmlbook.ru/css/top

Похоже да не то, тут совсем другая ситуация. И абсолютное позиционирование тут никак не поможет, т.к. спозиционировав что-то абсолютно вы изымаете блок из общего потока, и другие блоки (в вашем случае параграфы <p>) его не "видят"

HJ

274

happy-joker

1 июля 2011, 13:24

#6

/ru/forum/393270 - а как реализует это зорька? Ей нужно указать тегами начало и конец контентной части, и блок можно вписать в неё как угодно:

один или несколько блоков можно разместить слева, справа, в начале, в конце страницы, либо разделяя контент на 2 части.

83

oux

1 июля 2011, 13:55

#7

HTML:

<div id="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<div class="block">
</div>
</div>

CSS:

#wrap{
width: 400px;
margin: 0 auto;
border: 1px solid red;
}
.block {
width: 200px;
height: 100px;
border: 1px solid green;
position: relative;
bottom: 0px;
}
p {
margin-bottom: 50px;
}

Сорри, первый пост не так прочитал, щас что-нибудь придумаем =)

96

LovelAss

1 июля 2011, 13:59

#8

К наружному большому блоку position: relative; добавь, а к внутреннему маленькому position: absolute; bottom: 0;

P.S. Только вот текстом он тогда вряд ли обтекаться будет.

C

277

Chukcha

1 июля 2011, 14:03

#9

Как вариант:

в том месте где по тексту вы планируете обтекание - вставить прозрачный gif с флоат:лефт. Размер img должен соответствовать обтекаемому блоку.

Сам блок абсолютно спозиционировать с помощью js, предварительно узнав место расположения img

Chukcha добавил 01.07.2011 в 18:03

Как вариант:

в том месте где по тексту вы планируете обтекание - вставить прозрачный gif с флоат:лефт. Размер img должен соответствовать обтекаемому блоку.

Сам блок абсолютно спозиционировать с помощью js, предварительно узнав место расположения img

HJ

274

happy-joker

1 июля 2011, 14:10

#10

oux, в вашем варианте текст большого div не обтекает малый.

happy-joker добавил 01.07.2011 в 18:14

LovelAss, да, текст в этом случае накладывается внахлёст.

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ