html - 从图像的右上角开始放置文本

Question

如何从图像的右上角开始放置文本？

html

<div class="img-text">
   <img>
</div>
<div class="div">
   <h4>Title</h4>
   <ul>
      <li>Image Caption</li>
      <li>Added on which date</li>
      <li>Description of the image?</li>
   </ul>
</div>

css

.img-text img{
    width: 100px;
    height: 100px
}

Answer 1

您可以使用在同一行上同时display:inline-block获取 thediv和 the 。img

.img-text, .div {
  display:inline-block;
}

这是一个演示

Answer 2

将您的图像和文本添加到具有相对定位的公共容器中，然后将文本绝对定位到右侧。例如：

.container {
position: relative;
    width: 100px;
    height: 100px;
}

.container img {
    position: absolute;
}

.img-text{
    position: absolute;
    right: 0;
}

在这里演示http://jsfiddle.net/sJEKE/

Answer 3

这太令人费解了。相反，只需使用类

.text-wrap-right {
    float: right;
margin: 10px;
}
.text-wrap-left {
    float: left;
margin: 10px;
}

并将它们放在您的图像上

<style>
  .text-wrap-right {
    float: right;
margin: 10px;
}
.text-wrap-left {
    float: left;
margin: 10px;
}
  </style>
<div > <img src="http://a.lgorithms.com/mobile/ArtStarModel.png" width="40%" alt="ArtStar Model" class="text-wrap-left" > 
     ArtStar is an "App Toy": a platform for art-related games and apps. 
        A.lgorithms created 2 games and a cross-platform app for ArtStar. In <a href="screenshots/TraceStar.png" class="thickbox" title='<img src="screenshots/TraceStar.png" width="300px" border="1" />'><strong>TraceStar</strong></a>,
        we developed a game in which the player, looking through the device, sees ArtStar drawing board and traces a drawing to
        get a good score - and make the drawing come alive. The game uses image recognition algorithms we developed in-house and some
        heavy duty video technologies. Click here 
        to see a video.
        
        </div>