1

我有几个嵌套的 div，我试图在图像的右下角浮动一些文本，然后在图像的右侧有更多的文本。浮动文本显示在整行的右侧，而不是图像的右侧。整个内容（连同其他文本）被包裹在一个大 div 中，如果我添加底部：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 回答
0

好的，所以我对您的 css 和您的 HTML 布局方式进行了更改，我相信这就是您正在寻找的。请让我知道这是否适合您。JSFiddle

http://jsfiddle.net/cornelas/4MXvj/

CSS

.outerwrapper
  {
  clear: both;
 min-height: 45px;
  margin-left: 10px;
  }
.innerwrapper
  {
  clear:both;
  }
  .innerwrapper img {
    width: 35%;
    height: 35%;
    display: block;
   }
  .innerwrapper div {
   display: inline-block;
  }

} .caption { 字体大小：13px; } .floatedtext { 字体大小：12px;

 }

HTML

<div>
   <div class='outerwrapper'>
   <div class='innerwrapper'>
    <img src='https://www.blackbaud.com/image/products/luminate-online/img_Advocacy.png'>
          <div class='floatedtext'>1</div>
          <div class='caption'>image caption to the right<br></div>
        </div>
    </div>
 </div>
于 2013-05-10T20:20:28.397 回答