Question

所以，当我尝试在图像的右侧放置一些文本时，我得到了这个非常奇怪的错误：

当我用作文章描述时，定位工作。

那就是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;
}

如果我将“文章摘要”更改为更长的文本，则会在图像下方生成文本。

图片：

small summary

large summary

我开始意识到这与图像右侧不能超过1行文本的事实有关。但为什么会这样呢？

Answer 1

文本占用了所需的所有空间。如果你想让它保持在右边，你需要给descr div一个宽度

.article_descr {
    position: relative;
    float: left;
    width: 70%;
}

Answer 2

给你的

一个最大宽度，使图像宽度+

宽度不会超过容器100％：

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

http://www.liveweave.com/e7uYIh

文本的位置根据其长度而变化

2 个答案: