如何设置下面的图片按钮？ [英] How can I set button below image?

问题描述

我有一个小问题：

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

这是我的CSS code：

  .news_img {
  保证金：0 0 20 20;
  浮动：左;
}
.trailer_button {
    的z-index：999;
    浮动：左;
    保证金：1 20 20 -20;
    宽度：181px;
    边界半径：10px的;
}
.buttonimg {
    宽度：汽车;
    身高：汽车;
}
 

.news_img 是图像搜索
.trailer_button 是按钮结果
-buttonimg 是围绕按钮和图像的div

这是HTML

 ＆LT; D​​IV CLASS =movie_box＆GT;
    ＆LT; H3类=H3＆GT;'。$电影['名'。'＆LT; / H3和GT;'
    ＆LT; D​​IV CLASS =buttonimg＆GT;
        ＆LT; D​​IV CLASS =news_img＆GT;
            ＆LT; IMG SRC ='。$电影['盖']'。/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;按钮类=trailer_button类型=按钮＆GT;挂车LT; /按钮＆GT;
 

解决方案

无论是＆LT; BR /＆GT; 铁道部Haviv建议，或者只是删除花车：

下面是一个运行例小提琴

  .news_img {
  保证金：0 0 20 20;}
.trailer_button {
    的z-index：999;    保证金：1 20 20 -20;
    宽度：181px;
    边界半径：10px的;
}
.buttonimg {
    宽度：汽车;
    身高：汽车;
}
 

I have one little problem:

How can I set button below image?

This is my css code:

.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 is image
.trailer_button is button
-buttonimg is div around button and image

This is 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>

解决方案

Either the <br/> Mor Haviv suggested, or just remove the floats:

Here's a running 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;
}

这篇关于如何设置下面的图片按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！