浮动：正确;不是一路漂浮

我想制作一个简单的页脚框，左侧有一些文字，右侧有一些文字，但是当我将正确位置的文字设置为float: right;时，它只能达到60％正确的。浮动：正确;不是一路漂浮

道歉，如果这是超级简单，但我一直在看它永远只是不能得到它。

这是我的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>

来源

2016-08-01 FirstOrderKylo

的'FLO在'工作正常，它只是你给它'宽度：350px' – 4castle

添加text-align:right;在.alignright类

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

来源

2016-08-01 22:44:25 jonju

太棒了，这工作！非常感谢！ – FirstOrderKylo

如果它真的帮助你。请接受我的帖子 – jonju

我现在做了，我不得不等待6分钟。 – FirstOrderKylo

浮动：正确;不是一路漂浮

回答

相关问题