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

는

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


} 
.cart{ 

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

} 

당신이 나를 선택한 항목 아래에서 사진과 바닥 글 아래의 추가를 넣어 도움이 될 수 있습니다 내 CSS는 무엇입니까? 감사합니다

Answer 1

.book 세부 정보 표시를 차단하도록 변경하십시오. 이 같은

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