我有一个小问题:
如何在图像下方设置按钮?
这是我的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>
答案 0 :(得分: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/
答案 1 :(得分:1)
<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;
}