我会使用无序列表。请参阅下面的解决方案:
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 链接更新:http: //jsfiddle.net/5t1zu6px/7/
希望这会有所帮助!