바닥 글 떠있는 이미지

-1

내 페이지에 position:fixed 바닥 글이있어서 페이지와 함께 스크롤됩니다. 바닥 글 안에는 5 개의 이미지 세트가 있습니다. 문제는 이미지가 바닥 글의 맨 아래에 매달려 바닥이 보이지 않는다는 것입니다. 마진이나 패딩 값으로 화면의 적절한 위치로 이동하지 않았습니다. 누락 된 CSS 명령이 있습니까? 아니면 바닥 글과 함께 이상한 것입니까?바닥 글 떠있는 이미지

이것은 바닥 글 및 이미지 내의 CSS입니다. 어떤 도움을 주셔서 감사합니다.

.footer { 
    background-color: rgba(0, 0, 0, 0.5); 
    height: 100px; 
    font-size:20px; 
    color:black; 
    font-family:Verdana; 
    padding-left: 8px; 
    width: 100%; 
    position:fixed; left:0px; bottom:100px; 
} 

.footer img{ 
    width: 59px; 
    height: 90px; 
    float: right; 
    display:inline; 
    padding: 1px; 
    margin-right: 50px; 
} 

<body> 
<div class="container"> 

<div class="header"></div> 

<div class="content"> 

    <div class="leftSidebar"> 
    <div align="center"> 
     <h3>Quick Stats</h3> 
    </div> 
    <p>Title: Exposure</p> 
    <p>Author: Kathy/Brendan Reichs</p> 
    <p>Series: Virals</p> 
    <p>Length: 436 pages</p> 
    <p>Publication Date: March 6, 2014 </p> 
    <p align="center"><a href="../Images/Barnes-and-Noble.png"><img src="../Images/Barnes-and-Noble.png" width="180" height="120" /></a><img src="../Images/amazon.png" width="180" height="98.18" style="z-index: -1;" /></p> 
    </div> 

<div class="rightSidebar"> 
    <div align="center"> 
     <h3>Kathy Reichs</h3> 
    </div> 
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br></p> 
</div> 

<div class="middleBar"> 
    <div class="bookTitle" align="center"> 
    <h1>Virals: Exposure</h1> 
    <h2 style="font-size:24px;">Kathy and Brendan Reichs</h2> 
    </div> 
    <div align="center"><img name="" src="../Exposure.jpg" width="315" height="456" alt="" /></div> 
</div> 
</div> 

<div class="footer"> 
    <div class="relatedBooks"> 
    <p>Related Books: ssssss </p> 
    </div> 
    <div class="footerImages"> 
    <img src="../Images/Swipe.jpg" width="1000" height="1500" /> 
    <img src="../Images/Code.jpg" width="59" height="90" /> 
    <img src="../Images/Shift.jpg" width="1000" height="1500" /> 
    <img src="../Images/Seizure.jpg" width="327" height="500" /> 
    <img src="../Images/Virals.jpg" width="327" height="500" /> 
    </div> 

</div> 

</div> 
</body>

출처

2014-03-07 user3390852

문제가 무엇인지 잘 모르겠습니다. 여기에 무슨 문제가 있습니까? http://jsbin.com/zajuhidi/2/edit – TimHayes

사실 @TimHayes, 코드가 잘 작동하는 것 같습니다. (http://jsfiddle.net/timmah/wdYLU/1/). 화면 너비가 너무 좁아지고 이미지가 서로 아래로 떠오르는 시점에 대해 이야기하고 있습니까? – Timmah

.footer로 흘러 들어가는 이미지는 아무 것도 바닥 글의 아래쪽 약간 아래에 나타나지 않습니다. 바닥 글의 중간에 위치 할 수 있도록 위로 이동해야합니다. – user3390852

"height : 100px;"를 삭제하십시오. 그러면 auto로 설정되며 이미지 주위에 더 많은 공간이 필요하면 "패딩 : 24px 0;"과 같은 것을 사용하십시오. 그것을 조금 빗나가게하는 것. 꼬리말의 높이를 선언 할 이유가 없습니다. 그것은 당신의 심상의 크기에 자동적으로 성장할 것이다. 나는 그것이 그들이 떠내려 오는 이유라고 상상한다.

출처

2014-03-07 04:20:11 thesublimeobject

바닥 글 떠있는 이미지

답변

관련 문제