Почему текст не выравнивается по верху? - PullRequest
Новая
       0

Почему текст не выравнивается по верху?

0 голосов
/ 19 июля 2011

У меня есть текстовый блок в div, который всплывает вправо. Div должен быть выровнен по верху, но он упал примерно на 100 пикселей. Смотрите текстовое поле рядом с красным цветком здесь: http://174.121.46.122/~flowerwo/inside.html

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

Вот HTML: 

<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3><a href="#">Headline</a></h3> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" /> 
</div>
</div>
</div><!-- end small box -->

Вот CSS: 

#small-box  { 
    width: 625px; 
    position: relative;
    margin: 10px 0 0 5px;
    background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top          { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot          { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }

img.small-box-photo     { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box

Буду признателен за любую помощь в правильном выравнивании с вершиной. 

            { width: 300px; float: right; margin: 0 30px 0 0; }

Ответы [ 2 ]

1 голос
/ 19 июля 2011 
#small-box-bot => display: table;

img.small-box-photo => float: left;
1 голос
/ 19 июля 2011

Это работает, как ожидалось для меня.Взгляните на этот пример .Разве это не похоже на то, что вы пытаетесь достичь?Если нет, дайте больше информации и, предпочтительно, ссылку на онлайн-версию, где мы можем увидеть проблему.

ОБНОВЛЕНИЕ ПОСЛЕ ОНЛАЙН-ПРИМЕРА.

Итак, в приведенном вами примере естьпроблема с очисткой возникает, когда:

  1. * #r-box-lower очищает правое плавающее с clear: right
  2. #r-box-lower сидит на том же уровне DOM, что и #small-box, содержащийстранно сдвинутый блок текста
  3. из-за стр. 1 и стр. 2 #text-box очищается #r-box-lower, что заставляет его начинать именно там, где начинается #r-box-lower.

Итак, чтобы решить эту проблему, вам нужно заключить #right-box и r-box-lower в общий div, например: 

<div id="right-column" style="float: right; width: 192px">
    <div id="right-box">
        …
    </div>
    <div id="r-box-lower">
        …
    </div>
</div>

Конечно, вы хотите переместить эти встроенные стили в свою таблицу стилей.

...