1

いくつかのネストされた div があり、画像の右下隅にテキストを浮かせてから、画像の右側にさらにテキストを配置しようとしています。フローティング テキストが、画像の右側ではなく、行全体の右側に表示されています。全体が (他のテキストと共に) 1 つの大きな div にラップされ、bottom:0px を追加すると、フロートしたいテキストがその下部に表示されます。

あるはずです（画像の右下隅に数字があります）

[_1] キャプション

しかし、私は得ています

[_] キャプション 1

HTML

<div>
    <div class='outerwrapper'>
      <div class='innerwrapper'>
        <img src='image.jpg'>
        <div class='floatedtext'>1</div>
      </div>
      <div class='caption'>image caption to the right<br></div>
    </div>
</div>

CSS

.outerwrapper
{
  clear: both;
  min-height: 45px;
  margin-left: 10px;
}
.innerwrapper
{
   clear:both;
}
.caption
{
   font-size:13px;
}
.floatedtext
{
   font-size:12px;
   position: absolute;
   right:0px;
   text-align:right;   
}
4

2 に答える 2

1

innerwrapper クラスには相対位置が必要です

http://jsfiddle.net/8SDvu/

それが基本です。必要に応じてパディングとマージンを追加したいかもしれませんが、それらを理解できると確信しています

.innerwrapper
{
   clear:both;
   position: relative;
   float: left;
}

追加したいかもしれません

.floatedtext {
   bottom: 0;
}
于 2013-05-10T20:15:49.063 に答える