将div放在某些内容下方，并将div放在div的底部

Question

您好我有两个问题...如果您查看我的图片，“添加到购物车”的提交按钮应该在图片下方，我的名字的灰色页脚应位于页面底部，我已经花了一小时试图找出如何做到这一点，我不知道如何... 我正在使用一个PHP函数，其中的图片保存为.bookdetails类，提交按钮ID为.cart .... footer只是页脚..我需要这样做...请你帮忙...这是我的页面的样子

这是我的图片曝光代码

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-details显示更改为阻止。

对于页脚试试这个：

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