Положение текста меняется в зависимости от его длины

0

Поэтому, когда я попытался позиционировать текст справа от изображения, я получил эту очень странную ошибку:

Позиционирование работало, когда я использовал в качестве описания статьи несколько символов.

Итак, что HTML-код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="somelogo.png">
        <link rel="stylesheet" type="text/css" href="main.css" />
        <title>Title - Home</title>
    </head>
    <body>
        <section id="mainContent">

            <div class="article_summary">
                <span class="article_date_author">2013-11-08 20:31:32 by MY NAME</span>
                <span class="article_title">ARTICLE TITLE HERE</span>
                <div class="article_clear"></div>
                <div class="article_image_container">
                    <img class="article_image" src="http://i.imgur.com/Nl8SwBp.jpg">
                </div>
                <div class="article_descr">
                    <p>
                        Article Summary
                        <a href="somelink">Read more...</a>
                    </p>
                </div>

            </div>
        </section>
    </body>
</html>

main.css:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);

* {
    font-family: "Ubuntu";
}

.article_summary {
    overflow: hidden;
    background-color: white;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 2px 2px 10px 1px #777;
}

.article_date_author {
    font-size: 0.7em;
    float: right;
    padding: 10px 10px 0 0;
}

.article_clear {
    clear: both;
}

.article_image_container {
    position: relative;
    float: left;
}

.article_image {
    float: left;
    padding-top: 10px;
    width: auto;
    max-height: 300px;
    max-width: 100%;
}

.article_descr {
    position: relative;
    float: left;
}

Если я изменил "Резюме статьи" на что-то более длинное, текст будет отображаться ниже изображения.

Изображений:

Изображение 174551

Изображение 174551

Я пришел к пониманию, что это связано с тем, что он не может выдержать более 1 строки текста справа от изображения. Но почему это происходит?

  • 1
    почему вы делаете так, чтобы текст div тоже плавал?
  • 0
    Правда, float: left; даже не нужно!
Теги:
css-float
fontfamily

2 ответа

1
Лучший ответ

Текст занимает все необходимое пространство. Если вы хотите, чтобы он оставался справа, вам нужно дать descr div ширину

.article_descr {
    position: relative;
    float: left;
    width: 70%;
}
  • 0
    Да, установка ширины решила это. Относительное положение и свойства с плавающей точкой даже не нужны :)
  • 0
    Правда, я был сосредоточен на решении вашей проблемы. Рад слышать, что это сработало;)
0

Отдай свое

максимальной ширины, так что ширина изображения +

ширина не будет больше, чем контейнеры 100%:

.article_descr {
  position: relative;
  float: left;
  max-width: 60%;
}

http://www.liveweave.com/e7uYIh

Ещё вопросы

Сообщество Overcoder
Наверх
Меню