2016-08-01 13 views
0

私は、テキストの右側のビットを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> 
+0

text-align:right;を追加します。 'flo at 'は正常に動作しています、それはあなたが 'width:350px'を与えたことだけです – 4castle

答えて

2

.alignrightクラスで

.alignright { 
    float: right; 
    text-align:right; 
} 
+0

これはうまくいきました!どうもありがとうございます! – FirstOrderKylo

+0

本当に助けてくれたら。私の投稿を受け入れてください。 – jonju

+0

私は今やりました。私は明らかに6分待たなければなりませんでした。 – FirstOrderKylo

関連する問題