HTML 将文本放在另一个文本旁边？答案

【问题标题】：HTML Place text next to another text?HTML 将文本放在另一个文本旁边？
【发布时间】：2013-11-01 17:07:05
【问题描述】：

这有点难以解释，但我试图将一个文本放在另一个文本旁边。一张图片胜过一千个字，所以这就是我想要实现的目标。

这是一张应该是什么样子的图片

http://imgur.com/hc3dNJx
http://i39.tinypic.com/24kxft3.jpg

这就是我目前所拥有的。如您所见，我要放置在此文本旁边的文本不在应有的位置。我说的是应该在右边“9.1，日期，作者”的粗体文本。

JSFiddle

HTML

    <li class="post" >
        <article class="in-column" style="height:300px;"> <a href="http://yahoo.com"> <p class="article-title" style="font-size:26px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300" style="float:left; padding-right:20px;"></a>
            <p class="excerpt" style="width:700px; line-height:20px;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</p> 

            <p class="excerpt" style="float:right; font-size:70px; font-family:Segoe UI;"><b>9.1</b></p>
        <p class="excerpt" style="float:right; font-size:14px; font-family:Segoe UI;"><b>Date: </b>2 June 2012<br/><b>Author: </b> John Smith</p>

            </article>
      </li>

      </section>
      </section>

CSS

 article.in-column {    
      border-bottom: 1px solid #dddddd;
      text-align: left;
      padding-left: 25px;
      padding-right: 25px;   
      padding-top: 15px; 

  }

  article.in-column .excerpt {
      color: #2f2f2f;
      font-size: 11px;
      margin: 0px;
      padding-bottom: 5px;   

  }

  p.article-title{
          line-height: 19px;
          margin: 5px 0px;
          color: #151515;
          font-weight:bold;
          font-size:16px;
      }

【问题讨论】：

如果你想要漂浮在上面的东西，那么你必须把它放在文章内容之前。当然，还有其他方法可以将它放在那里——由于文本内容非常有限且大小可预测，因此绝对定位也可能是一种选择。或者将图片容器、文章文本和信息全部设置为内嵌块，并垂直对齐顶部。

标签： html image text

【解决方案1】：

那个内容<p>你需要给width:500px; float:left的元素

和9.1的粗体字你需要给line-height:50px

检查这个小提琴http://jsfiddle.net/NmUaX/21/

【讨论】：

【解决方案2】：

我尝试在右侧浮动元素上替换您的 HTML（和一些 CSS）：

<div style="float:right;">
    <div class="excerpt" style=" font-size:70px; font-family:Segoe UI;">
        <b>9.1</b>
    </div>
    <div class="excerpt" style="font-size:14px; font-family:Segoe UI;">
        <b>Date: </b>2 June 2012
        <br/><b>Author: </b> John Smith
    </div>
</div>

如果你想将一个元素浮动到右上方，最好将它放在文章内容之前。此外，最好将两个元素（9.1 和日期）包装到一个容器中，然后再将它们浮动到右侧。

【讨论】：