如何在图片下方设置按钮？

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

这应该是您的 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/

Answer 2

<br/> Mor 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;
}

如何在图片下方设置按钮？

How can I set button below image?

html

css

image

button