响应 position:absolute 按钮

Question

我有一个图像，其右侧有一个绝对位置按钮。调整 window 大小时，该按钮应保留在原位。

我可以在每次小屏幕更改后使用愚蠢的媒体查询来执行此操作，但这似乎不正确。

最好的解决方案是什么？我还在这里创建了一个 jsFiddle：http://jsfiddle.net/5t1zu6px/2/

.post-image {   
    width:40%;
    position:relative;
    float:left;
}
button {
    position:absolute;
    bottom:10%;
    right:-9%;
}

谢谢

Answer 1

我会使用无序列表。请参阅下面的解决方案：

HTML

发件人：

<div class="post-image">
<img src="http://no11.ee/hulk/wp-content/uploads/2015/04/meeskond.png">
<button>BUTTON</button> 
</div>

收件人：

<div class="pst-img">
<ul>
<li><img src="http://no11.ee/hulk/wp-content/uploads/2015/04/meeskond.png" /></li>
<li><button>BUTTON</button></li>
</ul>
</div>

CSS

发件人：

.post-wrap {
  width:100%;
  height:377px;
}
.post-image {   
 width:40%;
 position:relative;
float:left;
}
button {
  position:absolute;
  bottom:10%;
  right:-9%;
}
.post-text {
  width:60%;
  float:left;
  text-align:center;
}
p {
  padding:40px;   
}

收件人：

.pst-img ul li { 
  display:inline-block; padding-right:100px; list-style:none; }
.post-wrap {
  width:100%;
  height:377px;
}
.post-text {
  width:60%;
  float:left;
  text-align:center;
}
p {
  padding:40px;   
}

JSFiddle Link 更新：http://jsfiddle.net/5t1zu6px/7/

希望这对您有所帮助！

响应 position:absolute 按钮

Responsive position:absolute for button

position

absolute

responsiveness

HTML

CSS