对齐div下面的一些内容和位置页脚底部div

Question

你好，我有两个问题...如果你看我的照片，提交按钮，说“添加到购物车”应该在图片下面，灰色页脚与我的名字应该是在页面的底部，我已经花了一个小时试图找出如何做到这一点，我不知道我怎么.. 使用具有图像保存类的PHP函数。 bookdetails和提交按钮id是.cart ....页脚只是页脚..我需要做到这一点...可以请帮助...这里是我的页面看起来像

这是我的用于抠图的代码

for($row = 0; $row < sizeof($array);$row++){ 
    echo '<div class="book-details"><img src="images/'.$array[$row]['isbn'].'.jpg" alt="'.$array[$row]['title'].'" >'.'<br/>'.$array[$row]['title'].'<br/>by '.$array[$row]['author'].'<br/><input type="radio" name="orders['.$array[$row]['title'].']" value="hardcover" >Hardcover: $'.$array[$row]['hardcover'].'<br/><input type="radio" name="orders['.$array[$row]['title'].']" value="softcover" >Softcover: $'.$array[$row]['softcover'].'<br/><input type="radio" name="orders['.$array[$row]['title'].']" value="e-book" >E-Book: $'.$array[$row]['e-book']."</div>"; 
}; 
echo '<div class = "cart"><input type="submit" value="Add Selected Items to  Cart"></div>'; 
echo '</form>'; 

这里是我的CSS

.book-details { 
    width:auto; 
    height: auto; 
    display: inline-block; 
    float: left; 


} 
.cart{ 

    width:auto; 
    height: auto; 
    display: block; 
    float: right; 

} 

你可以帮我把选取的项目新增下面的图片和页脚低于？感谢

Answer 1

尝试改变.book细节显示阻拦。

和页脚试试这个：

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height:100px; 
}