Плавающий один DIV слева и другой справа в родительском контейнере с использованием динамического относительного позиционирования

0

У меня есть родительский контейнер, внутри которого я бы хотел разместить текстовый элемент, который заполняет всю ширину, пока он не достигнет предела, который должен определяться изображением, которое тяготеет к правой стороне родительского контейнера.

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

<div class="subContext">
    <div class="description">
        This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. 
    </div>
    <div class="boxImage">
        <img src="about:blank" alt="I want to be on the right" />
    </div>
</div>

Посмотрите мой JSFiddle здесь

Что я делаю не так?

Я ищу кросс-браузерное решение с обратной совместимостью, по крайней мере, с IE 8 и без использования JavaScript.

ПРИМЕЧАНИЕ. Я чувствовал, что это должен быть чрезвычайно простой CSS. Все еще делаю. Тем не менее я искал и пытался найти множество возможных решений, но никто не работал для меня. Я могу просто пропустить важную ключевую информацию/понимание.

  • 0
    .boxImage должен находиться перед .description в html, ИЛИ ширина должна быть установлена для .description
  • 0
    Установка ширины не вариант, мне нужна полная масштабируемость. Я попытался изменить порядок разметки, как вы предложили, но безрезультатно. Если я это сделаю, boxImage отображается над текстом, но больше ничего не меняется.
Показать ещё 1 комментарий
Теги:
css-float

6 ответов

2
Лучший ответ

Я думаю, это то, что вы хотите!

Я взял float: left; из этого и переупорядочил ваш HTML.

.contentBox .contentArea-inner .subContext .description {
    -webkit-backface-visibility: hidden;
}

HTML:

<div class="boxImage">
    <img src="/img/dev/contentBoxSymbolicImage.jpg" />
</div>
<div class="description">
 This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. 
</div>
Поделиться
  • 0
    Абсолютно, сэр. 100%. Благодарю вас!
1

Вот jsFiddle с тем, что вам нужно.

Я просто перестроил некоторый HTML:

<div class="subContext">
    <div class="boxImage">
        <img src="/img/dev/contentBoxSymbolicImage.jpg" />
    </div> 
    This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. 
</div>
Поделиться
0

Переместите изображение перед описанием и удалите float: left от описания div

HTML

<div class="subContext">
    <div class="boxImage">
        <img src="http://lorempixel.com/300/200" />
    </div>
    <div class="description">
        This is just a blindtext. This is just a blindtext. ... 
    </div>
</div>

Обновлен JSFiddle

Плавающий элемент означает грубо, выньте его из нормального потока, поместите его влево или вправо от его контейнера и пусть вокруг него поплывут следующие элементы.

Поделиться
0

Я не уверен, что это удовлетворяет вашим требованиям, но вот один из способов:

Я удалил float из div.description и переместил его над изображением в HTML.
Теперь описание будет обтекать плавающее изображение.

Одно из предостережений заключается в том, что текст будет обтекать изображение, если оно выше изображения, но я не уверен, что это нежелательно для вас.

.contentBox .contentArea-inner .subContext .description {
    -webkit-backface-visibility: hidden;
    // removed float
}

<div class="boxImage">
    <img src="/img/dev/contentBoxSymbolicImage.jpg" />
</div>
<div class="description"> ... </div>

http://jsfiddle.net/dShYL/4/

Поделиться
  • 0
    @ Watson Похоже, у нас обоих была одна и та же идея;)
  • 0
    ya -- standard solution :)
Показать ещё 1 комментарий
0

Вам просто нужно указать ширину, которая меньше 100% для вашего div.description. (так как изображение имеет ширину 50 пикселей, оно должно быть меньше 100% - 50 пикселей)

.description { width: 75%; }

рабочая скрипка: http://jsfiddle.net/dShYL/6/

Причина: Floating делает ширину элемента уровня блока зависимым от его дочерних элементов. Он будет расширяться, по крайней мере, до ширины его родителя, и поскольку ваше содержимое внутри достаточно велико, оно расширяет его до полной ширины.

Вы также можете изменить порядок.description и.boxImage, чтобы сделать.boxImage первым. Это уже не семантически корректно, но работает, если вы не хотите указывать фиксированную ширину для.description

Поделиться
0

Давая ширину: 85% для описания решили проблему для меня. http://jsfiddle.net/dShYL/8/

Если размер изображения будет отличаться для каждого, тогда js будет способом, но для 50 * 50, ширина 85% - 90% должны решить его

.contentBox .contentArea-inner .subContext .description {
        -webkit-backface-visibility: hidden;
        float: left;
        width:85%;

    }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню