私は、テキストの右側のビットをfloat: right;
に設定すると、左側にテキストがいくつかあり、右側にテキストがある単純なフッターボックスを作ろうとしています権利。フロート:右;すべて浮動しない
これは非常にシンプルですが、私はそれを永遠に見てきましたが、それを得ることはできません。
ここに私のCSSとHTMLコードが参考になります。 (彼らは後でだ空のクラスを、無視する)
CSS:
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
html {
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 20px;
background-image: url('images/backgrounds/wallpaper.jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: RGBA(255,255,255,0.6);
}
body {
width: 70%;
margin: auto;
background-color: RGBA(200,200,200,0.4);
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-bottom: 20px;
padding-top: 10px;
border-radius: 6px;
}
div {
width: 95%;
margin: auto;
background-color: RGBA(50,50,50,0.95);
}
.alignleft {float: left;}
.alignright {float: right;}
.header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main {
}
.footer{
margin: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
.footerText {
font-size: 13px;
color: RGBA(255,255,255,0.3);
width: 350px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Site for Things and Stuff</title>
<!-- Style Sheets/Scripts/Misc Stuff -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='header'>HEADER TEST HEADER TEST</div>
<div class='main'>MAIN CONTENT TEST MAIN CONTENT TEST</div>
<!-- Footer -->
<div class='footer'>
<p class="footerText alignleft">No images are owned by this website unless specified.
<br><br>To recieve help with an issue on the website or other matters, please use the contact button above.</p>
<p class="footerText alignright">Test test test</p>
<div style="clear:both"></div>
</div>
</body>
</html>
text-align:right;
を追加します。 'flo at 'は正常に動作しています、それはあなたが 'width:350px'を与えたことだけです – 4castle