Текст, плавающий вокруг CSS-div, расположенный в

У меня есть большой div с небольшим div внутри него. Я хочу, чтобы меньший div располагался в нижней части большого div. Итак, я установил маленький div, используя «bottom: 0px; left: 0px; position: absolute;» Большой div имеет «позицию: относительный»; Маленький div появляется там, где он должен, но текст не плавает вокруг него. Я пробовал «float: left;» в сочетании с различными вариантами отображения, но, похоже, это не работает.Текст, плавающий вокруг CSS-div, расположенный в

источник

2013-09-22 sirugo

Разместите код .. –

Я не думаю, что это поможет кому. Посмотрите на это изображение. Это показывает, чего я хочу достичь. Я хочу, чтобы внутренний div располагался в нижней части внешнего div, независимо от того, как долго текст или сколько абзацев у меня есть. И текст должен всплывать вокруг него: http://www.sirugo.net/divfloat.png – sirugo

Float будет работать только с относительным положением. Когда вы устанавливаете один элемент в Абсолют, он не считается пробелом, взятым в элементе.

Кроме того, чтобы сделать поплавковые работы, вам нужно поместить установленное поплавок в элемент рядом с ним.

источник

2013-09-22 14:50:21

Так что невозможно поместить div в нижней части содержащего div, чтобы текст внутри содержащего div обтекал его? См .: http://www.sirugo.net/divfloat.png – sirugo

Насколько я знаю, это невозможно. Обычно вам нужно использовать Img, чтобы сделать что-то подобное. В моем случае я попытался найти способ, но, похоже, это сбой. Единственно возможно, что вы используете тег IMG и создаете тег P рядом с ним, чтобы иметь то, что вы хотите. –

EDIT: Не работает

сделать обертку для меньшего DIV (в DIV между двумя в вашем примере), и установить его с абсолютным позиционированием с нижней и слева, как нулевой шириной 100%.

Затем сделайте свой маленький div pos: relative и float, который div останется слева и очистите слева.

Я считаю, что это должно сработать.

источник

2013-09-23 02:05:29 Jason

Спасибо! Я попробовал, но это не сработало. Не уверен, что я точно понял, что вы имели в виду. Пожалуйста, взгляните на исходный код в моем примере: http://sirugo.net/divindiv.html – sirugo

@sirugo У меня будет заглянуть завтра днем. Если я смогу сесть и посмотреть, я уверен, что он пойдет быстро ... – Jason

Будет оценен. Спасибо! – sirugo

Позиция CSS (абсолютная/фиксированная/относительная) приводит элемент к верхнему уровню, оставляя слой зависимости порядка источника.

Позиционированные элементы никогда не заботятся о порядке отображения других элементов. Я не вижу способа заставить позиционированный и не позиционируемый элемент реагировать вместе и заботиться о их поведении.

Если вам нужно решение, например, ваше [image], вы можете использовать float, но контент вставляется с текстами. Как:

div { 
    font: 14px Arial; 
    width:400px; 
    margin:30px auto; 
    border:1px solid #ccc; 
    padding:20px; 
    overflow:hidden; 
    text-align:justify; 

} 

img { 
    margin:10px 20px 0 0; 
    float:left; 
}

Демо: http://jsfiddle.net/KY8FG/

источник

2013-09-24 19:18:46

Текст, плавающий вокруг CSS-div, расположенный в

ответ

Смежные вопросы