Плавающий div без указания ширины - PullRequest
Новая
       5

Плавающий div без указания ширины

2 голосов
/ 12 января 2010

Я могу разместить изображение слева и без проблем обернуть текст вокруг него, просто указав float: left на изображении. Как это: 

<div id='foo'>

  <img src='bar' alt='baz' style='float: left;' />
  Lorem ipsum...

</div>

Однако, если изображение обернуто в элемент div, как показано ниже, я не смогу добиться того же эффекта, не объявив фиксированную ширину для div#image_container и div#text_container

<div id='image_container'>
  <img src='blah' alt='blah' />
</div>

<div id='text_container'>
  Lorem ipsum... long text
</div>

Есть ли способ сохранить гибкость первого решения и избежать объявления ширины и иметь плавающий div#image_container рядом с div#text_container?

Ответы [ 3 ]

1 голос
/ 12 января 2010

Попробуйте установить overflow: hidden в div обёртки, который автоматически установит div в ширину изображения.

ОК, может быть, я неправильно понял ваш вопрос. Вы просто хотите, чтобы текст обтекал изображение? Если это так, все, что вам нужно, это CSS: 

#text_container { display: inline; }
0 голосов
/ 12 января 2010

Вместо текстового контейнера используйте тег абзаца (<p></p>). Он будет охватывать контент, а также будет более доступным и смысловым.

0 голосов
/ 12 января 2010 
#text_container,
#image_container {
  display: inline;
}

должен это сделать. Попробуйте это: 

<html>
    <head>
    <style>
        #top {
            float: left;
            display: inline;
            border: 1px solid green;
        }

        #bottom {
            float: right;
            display: inline;
            border: 1px solid red;
        }
    </style>
    </head>
    <body>
    <div id="top">
        I'm the top div
    </div>
    <div id="bottom">
        I'm the bottom div
    </div>
</html>

Но если содержание вашего div'а больше, чем ширина, которую вы им оставили (что, вероятно, так и есть), тогда вы будете бороться. Вы должны действительно дать ему ширину, но вышеописанное может работать для вас, в зависимости от того, как вы хотите его использовать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...