如何设置图片下方的按钮？答案

【问题标题】：How can I set button below image?如何设置图片下方的按钮？
【发布时间】：2015-04-06 22:59:45
【问题描述】：

我有一个小问题：

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

这是我的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>

【问题讨论】：

嗯，什么？？？目前还不清楚...
请编辑您的帖子并添加您的 HTML 代码。
我想在img下设置这个预告片按钮
您的 css 存在严重问题，在许多值中缺少 px
嗯。 . .什么？这甚至都不是问题。

标签： html css image button

【解决方案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/

【讨论】：

@IvanGorky 我添加了 jsFiddle。你可以看到它在那里工作得非常好。

【解决方案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;
}

【讨论】：