1

画像の右上隅からテキストを配置するにはどうすればよいですか？

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
}
4

3 に答える 3

3

とのdisplay:inline-block両方を同じ行に表示するために使用できます。divimg

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

これがデモです

于 2012-12-26T08:41:54.257 に答える
2

画像とテキストを共通のコンテナーに相対的な配置で追加し、テキストを絶対的に右側に配置します。例えば：

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

.container img {
    position: absolute;
}

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

デモはこちらhttp://jsfiddle.net/sJEKE/

于 2012-12-26T08:56:38.267 に答える