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

问题描述

我有一个小问题：

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

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 图片

.trailer_button 是按钮

-buttonimg 是div

 < 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_buttontype =button> Trailer< / button> 
  

解决方案

< br /> Mor Haviv建议或删除浮动：

这是一个运行

  .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; 
} 
  

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;
}

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