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>

主.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;
}

如果我将“文章摘要”更改为更长的内容，则文本将出现在图像下方。

图片：

小总结

大总结

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

4

2 回答 2

1

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

.article_descr {
    position: relative;
    float: left;
    width: 70%;
}
于 2013-11-09T13:10:35.667 回答
0

给你

最大宽度，使图像宽度 +

宽度不会超过容器 100%：

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

http://www.liveweave.com/e7uYIh

于 2013-11-09T13:11:16.057 回答