Почему мой макет выглядит так, когда плавающий? - PullRequest
Новая
       2

Почему мой макет выглядит так, когда плавающий?

0 голосов
/ 03 февраля 2011

У меня есть коды ниже:

(проверьте коды ниже в Google Chrome 8 +)

коды 1: 

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 document</title>
<div style="background:red; height:300px; width:1500px;">
    WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW
    <img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230">
</div>
<div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;">
    asc aca ascacaaaaaa<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q
</div>

Почему отображается второе изображениево второй строке после символа Q?

Я не хочу менять коды 1. Я только хочу знать причину, почему коды 1 отображаются так странно.Я думаю, что второе изображение должно отображаться слева от символов ascacaaaaaa.Так же, как коды 2 ниже:

коды 2: 

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 document</title>
<div style="background:red; height:300px; width:1500px;">
    WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW
    <img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230">
</div>
<div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;">
    asc aca ascacaaaaaab<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q
</div>

Спасибо!

Ответы [ 4 ]

0 голосов
/ 03 февраля 2011

Это потому, что ваше первое изображение достаточно высоко, что оно расширяется вниз во второе div, поэтому оно появляется слева от вашего текста (так как оно установлено как плавающее).

Если вы добавитенемного места, чтобы разбить два элемента div, тогда вы увидите второе изображение в нужном вам месте.Попробуйте добавить стиль margin-top: 150px; или clear:left; ко второму div, чтобы увидеть это.

0 голосов
/ 03 февраля 2011

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

0 голосов
/ 03 февраля 2011

Обтекание текста вокруг изображения легко при использовании атрибута CSS Float. У вас есть выбор: переместить изображение влево или вправо, а все остальное за вас.

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

0 голосов
/ 03 февраля 2011

Ваше первое изображение толкает его вниз.Попробуйте добавить clear: left;на втором div (в зависимости от того, чего вы хотите достичь).

ОБНОВЛЕНИЕ: После того, как вы опубликовали вторую версию, я проверил ее в Firefox.Они отображаются точно так же, с той лишь разницей, что у вас есть более длинный текст в № 2.:).Когда вы перемещаете изображение, вы вынимаете его из обычного встроенного потока, поэтому встроенный текст отображается таким образом.Изображение не отображается слева от начала текста, потому что другой всплывающий объект (большая картинка) толкает его вниз.

ОБНОВЛЕНИЕ 2: ОК, проверьте ваши последниекоды (Chrome 8) теперь вижу разницу.«ascacaaaaaaQ» (код 1) остается рядом с логотипом Google, а «ascacaaaaaabQ» (код 2) переходит к следующей строке под логотипом.И это просто потому, что второй слишком длинный (это одно «слово», поэтому не сломается), чтобы поместиться в небольшом пространстве между логотипом и правой границей зеленого div.Тем не менее, для меня (в коде 2) второе изображение не отображается слева от «ascacaaaaaa», оно прямо под ним.

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

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

...