2013-05-06 1 views
0

У меня есть этот HTML:У меня есть HTML-код, который работает так, как будто это невозможно. Как это можно объяснить?

<div style="width: 100%;"> 
    <div style="float: left; width: 44%; display: inline;"> 
     <img width="95%" height="95%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png"> 
    </div> 

    <div style="display: inline; float: left; width:54%>"> 

    </div> 
</div> 

<p> 
Some text blah blah 

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

Как это может быть? Это как-то ошибка, или она должна быть такой?

+0

Пустой в нем ничего нет, поэтому он не занимает места. Поплавок: слева помещает изображение слева, а «бла-бла» идет в следующем месте, которое находится рядом с ним. –

+0

введите «border: 2px solid red» и 'border: 2px solid blue;' вокруг ваших 2 'div', и я думаю, что это станет яснее - в основном ваши поплавки рушатся, а текст перемещается вверх. – Jonathan

+0

Получил. Спасибо, парни! Поэтому я думаю, что это правильный правильный способ сделать это, правильно? – Genadinik

ответ

2

float является block, и вы пытались использовать display: inline в block не прав

попробовать:

<div style="float: left; width: 44%; display: inline-block;"> 
+0

Я только что попробовал встроенный блок, но, похоже, он ничего не изменил. В каких случаях это? – Genadinik

+0

Я не понял ваш комментарий, вы хотите знать, что вызвало проблему? – silverfox

1

Вы не очищая поплавки так что они будут продолжать плавать рядом с другой содержание. Примените четкое исправление к самому удаленному div. Добавление overflow: hidden будет работать, но устарело.

http://jsfiddle.net/ExplosionPIlls/nNkJ8/

+0

Я действительно хотел, чтобы текст и изображение появлялись бок о бок. – Genadinik

+0

@ Генадиник, в чем проблема? –

0

Я не очень понимаю, что вы пытаетесь сделать :-), но я вижу это:

  • На ваш второй DIV: ширина: 54%>»должно быть ширина: 54% "(без символа выше кавычки)
  • Поплавки и показ: встроенные линии не ладят вместе. Я бы заменил их как на дисплей: встроенный блок, как этот

    < div style = "width: 44%; display: inline-block;" >

  • Хотя ваш второй div указывает атрибут «ширина», если ваш div пуст, он будет отображаться с шириной нуля. Попробуйте добавить «background-color: red»; к вашему стилю, чтобы увидеть, что я говорю. Вы ничего не увидите.

  • Текст рядом с вашим изображением, потому что это то, что плавает. Если вы хотите нарисовать текст под изображением, вы должны «очистить» ваши поплавки. Попробуйте следующее:

    < p style = "clear: both;" > Некоторый текст бла

Если вы решили попробовать «дисплей: встроенный-блока» «ясно: как» не надо.

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