Question

我试图在与图像右侧对齐的图像下方制作一个按钮（背景颜色为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，旁边还有另一个图像，需要有一个很好的空间

注意：我使用bootstrap来表示响应能力。

Answer 1

.wrapper{text-align:right;}
.responsive{width:100%; height:auto}

然后如果您需要以不同的方式对齐h2，可以将其对齐为h2{text-align:center}

Answer 2

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

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

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

将div与图像的右边缘对齐

2 个答案: