html + css를 사용하여 플로팅 단락으로 바닥 글을 설정하는 방법

CSS를 사용하여 바닥 글을 작성하려고하는데 페이지 왼쪽 하단과 오른쪽 하단에 페이지 번호가 필요합니다. 이것은 현재 코드입니다. 두 단락이 올바르게 표시되지 않습니다.html + css를 사용하여 플로팅 단락으로 바닥 글을 설정하는 방법

<html> 
<head> 
<style> 
    .footer { 
    bottom: 0px; 
    position: fixed; 
    display: inline-block; 
    } 
    .left { 
    float: left; 
    } 
    .right{ 
    float: right; 
    } 
</style> 
</head> 
<body> 
    <div class="footer"> 
    <p class="left">this is a footer</p> 
    <p class="right">Page: 1/12</p> 
    </div> 
</body> 
</html>

미리 감사드립니다.

출처

2017-01-24 rekotc

코드에서 백 슬래시를 제거하면 올바르게 작동합니다. 또한 플렉스 사용하여 내가 여기에 다른 해결책 넣어 width: 100%;

<html> 
<head> 
<style> 
.footer { 
    bottom: 0px; 
    position: fixed; 
    display: inline-block; 
    width: 100%; 
} 
.left { 
    float: left; 
} 
.right{ 
    float: right; 
} 
</style> 
</head> 
<body> 
    <div class="footer"> 
     <p class="left">this is a footer</p> 
     <p class="right">Pag: 1/12</p> 
    </div> 
</body> 
</html>

출처

2017-01-24 17:03:52

감사합니다! 폭 속성이 누락되었습니다! – rekotc

바닥 글에 폭을 추가 :

.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    bottom:0px; 
 
    position:fixed; 
 
} 
 

 
.left { 
 
    width: 15%; 
 
} 
 

 
.right { 
 
    width:15%; 
 
}

<div class="footer"> 
 
<p class="left">this is a footer</p> 
 
<p class="right">Pag: 1/12</p> 
 
</div>

출처

2017-01-24 17:22:01 Teshtek

html + css를 사용하여 플로팅 단락으로 바닥 글을 설정하는 방법

답변

관련 문제