将 div 与图像的右边缘对齐

Posted 2023-03-05

【中文标题】将 div 与图像的右边缘对齐

【英文标题】：Align div with right edge of image

【发布时间】：2014-10-18 01:11:41

【问题描述】：

我正在尝试在与图像右侧对齐的图像下方制作一个按钮（带背景颜色的 div）。两者都在包装器 div 中。当我向右浮动按钮时，它会使包装器 div 展开，并且按钮超出 img 的右边缘。我不能给包装器 div 一个固定的宽度，因为它需要响应。

我有什么：

<div class="col-xs-6">

   <div class="wrapper">

      <h2>Title</h2>

      <img class="responsive">

      <div class="button"></div>

   </div>

</div>


.button 
  float: right;
 

基本上，如何使包装器 div 与图像的宽度相匹配？或其他方式让按钮 div 与图像的右边缘对齐。

图片大约是 col-xs-6 div 的 70% 宽度，我不能让它占据整个 div，旁边还有另一个图片，需要有一个很好的空间。

注意：我正在使用引导程序进行响应。

【参考方案1】：

.wrappertext-align:right;
.responsivewidth:100%; height:auto

然后如果您需要以不同方式对齐 h2，您可以像 h2text-align:center 一样对齐它

【讨论】：

对不起，我忘了说图片需要对齐到页面的左侧。当我尝试 text-align:right 时，它将图像和按钮一直移动到包装器的右侧，整个包装器潜水延伸到 div.col-xs-6 的右侧。也不能使图像更宽。

然后给 col-xs-6 一个类（以防万一）并给它text-align:left; 之后，向包装器添加一个等于图像当前宽度的最大宽度，那就是它

由于某种原因，将 text-align:left 添加到 col-xs-6 后，按钮 div 不会向右对齐。但是能够添加浮动：对；到按钮。瞧！谢谢！

【参考方案2】：

使用 boostrap 我会这样做（如果这就是你的意思）：

<div class="col-xs-6">
    <img src="img/image.jpg" class="img-responsive"  />
    <button type="button" class="btn btn-default pull-right">some text</button>
</div>

编辑：抱歉，更正了按钮元素