Question

我有几个嵌套的div，我试图在图像的右下角浮动一些文本，然后在图像的右边有更多的文本。浮动文本显示在整行的右侧而不是图像的右侧。整个事情（连同其他文本）都包含在一个大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;   
}

Answer 1

innerwrapper类需要具有相对位置

http://jsfiddle.net/8SDvu/

这是它的基础知识，你可能想在需要的地方添加一些填充和边距，但我相信你可以想出那些

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

可能想要添加

.floatedtext {
   bottom: 0;
}

Answer 2

好的，所以我对你的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;
  }

} 。字幕 { 字体大小：13像素; } .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>

将文本浮动到图像上，右对齐

2 个答案: