Обтекание текстовых и блочных элементов вокруг изображений

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

Я попытался сделать свой div встроенным, и это сработало нормально, однако, как только я добавил другие div внутри этого div, он по-прежнему выглядел нормально, но при просмотре в Firebug маленькая синяя линия, показывающая элемент, который вы зависают в коде, расширенном над изображением, и когда я попытался добавить отступ к контейнеру div, это не сработало, и вы могли видеть, что это произошло потому, что отступ был добавлен в самом конце.

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

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

пример

Вот пример кода: (Этот пример является версией без упаковки)

<div class="main">
    <img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" />
    <div class="details">
        <div class="about">
            <div class="title">
                About:
            </div>
            <div class="info">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                
            </div>
            <!-- Info Ends -->
        </div>
        <!-- About Ends -->
    </div>
    <!-- Details Ends -->
    <div class="contentClear"></div>
</div>
<!-- Main Ends -->

Пример CSS:

#content .wrapper .left .main {
    padding-top: 20px;
    width: 550px;
}

#content .wrapper .left .main .screenshot {
    float: right;
    border: 1px solid #c0c0c0;
    width: 275px;
}

#content .wrapper .left .main .details {
    width: 263px;
    padding-right: 10px;
}

#content .wrapper .left .main .details .title {
    color: #0F5688;
    font-size: 1.8em;
    font-family: arial;
    font-weight: bold;
}

#content .wrapper .left .main .details .info {
    margin-top: 6px;
    font-size: 1.3em;
    font-family: Arial;
    color: #636363;
    line-height: 1.6;
}

Вот изображение, показывающее проблему с FireBug (из примера JSFiddle), как я сказал, оно выглядит нормально в браузере, но видя, как полоса firebug простирается полностью по изображению, которое я опасаюсь, что могут возникнуть проблемы..

пример jsfiddle


css word-wrap xhtml
person Brett    schedule 02.06.2011    source источник
comment
Чем Firebug не нравится ваш подход? Сообщается ли об ошибке?   -  person David says reinstate Monica    schedule 02.06.2011
comment
Проверьте сообщение сейчас, я отредактировал его с помощью примера jsfiddle KatieK.   -  person Brett    schedule 02.06.2011

Ответы (1)


arrow_upward
15
arrow_downward

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

В приведенном ниже примере (упрощенном из вашего кода) добавление отступов к плавающему изображению работает просто отлично.

CSS:

.main .screenshot {
    float: right;
    border: 1px solid #c0c0c0;
    padding: 5px;
}

.main .title{
font-size: 140%;
}

HTML:

<div class="main">
  <img src="img/png" width="150" height="117" class="screenshot" alt="Example" />
  <div class="details">
    <div class="about">
      <div class="title">About:</div>
      <div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
  </div>
</div>

Демонстрация jsFiddle

person KatieK    schedule 02.06.2011
comment
Прикомандирован. Единственная разница в том, что я применил к изображению отступ вместо отступа. jsfiddle.net/Vt8Mw - person Steve Day; 02.06.2011
comment
Да, это именно то, что я пробовал, но, как вы можете видеть из моего отредактированного поста, FireBug, похоже, это не нравится. - person Brett; 02.06.2011
comment
Если это нормально во всех браузерах, не беспокойтесь о том, что говорит Firebug - особенно внутри оболочки приложения, такой как jsFiddle. - person KatieK; 02.06.2011
comment
Ну да .... в конце концов, если это выглядит хорошо, просто беспокоился, что это может испортиться в некоторых браузерах или что-то в этом роде, хотя FireBug прав ... поэтому добавление заполнения в div не работает и почему вы должны добавить его к изображению. :) - person Brett; 03.06.2011
comment
Ага, спасибо @KatieK. Когда обернутый div имеет background-color, возможно ли иметь padding вокруг изображения, которое отделяет фон div от изображения? Это демонстрирует первое изображение в этом вопросе, где вокруг изображения есть пустое пространство. - person Ian Campbell; 19.08.2013
comment
@IanCampbell - Padding всегда будет иметь цвет фона своего элемента, но поля будут прозрачными. - person KatieK; 19.08.2013