html + cssを使用して浮動段落を使用してフッターを設定する方法

CSSを使用してフッターを作成しようとしていますが、ページの左下にメッセージが、右下にページ番号が必要です。これは私の現在のコードです。 2つの段落が正しく表示されません：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を使用して浮動段落を使用してフッターを設定する方法

答えて

関連する問題