如何在圖像下方設置按鈕？

Question

我有一個小問題：

如何設置下面的圖片按鈕？

這是我的CSS代碼：

.news_img{ 
    margin:0 20 0 20; 
    float:left; 
} 
.trailer_button{ 
    z-index:999; 
    float:left; 
    margin:1 20 -20 20; 
    width:181px; 
    border-radius:10px; 
} 
.buttonimg{ 
    width:auto; 
    height:auto; 
} 

.news_img是圖像
.trailer_button是按鈕
-buttonimg約爲按鈕，圖像DIV

這是HTML

<div class="movie_box"> 
    <h3 class="h3">'.$movies['name'].'</h3>' 
    <div class="buttonimg"> 
     <div class="news_img"> 
      <img src="'.$movies['cover'].'"/> 
     </div> 
     <button class="trailer_button" type="button">Trailer</button> 

Answer 1

無論是<br/>鐵道部Haviv的建議，或者只是刪除浮動：

這裏是一個正在運行的Example Fiddle

.news_img{ 
    margin:0 20 0 20; 

} 
.trailer_button{ 
    z-index:999; 

    margin:1 20 -20 20; 
    width:181px; 
    border-radius:10px; 
} 
.buttonimg{ 
    width:auto; 
    height:auto; 
} 

Answer 2

這應該成爲您的HTML代碼：

<div class="movie_box"> 
    <h3 class="h3">'.$movies['name'].'</h3>' 
    <div class="buttonimg"> 
     <div class="news_img"> 
      <img src="'.$movies['cover'].'"/> 
      <br/> 
      <button class="trailer_button" type="button">Trailer</button>  
     </div> 
    </div> 
</div> 

插入到圖像DIV的按鈕，並使用
創建一個新的行，就畫面下，把鼠標。

的jsfiddle：http://jsfiddle.net/1a0mzqz0/