Html 我的主要内容和浮动右栏之间有差距_Html_Css

Html 我的主要内容和浮动右栏之间有差距

html css

Html 我的主要内容和浮动右栏之间有差距,html,css,Html,Css,我在主要内容和浮动的右栏之间有一个间隙，我已经对其进行了修补，但似乎无法获得右栏和主体之间的间隙 <head> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"></div> <div id="le

我在主要内容和浮动的右栏之间有一个间隙，我已经对其进行了修补，但似乎无法获得右栏和主体之间的间隙

    <head>
        <title></title>
<link href="style.css" rel="stylesheet" type="text/css">

</head>
    <body>



<div id="header"></div>
<div id="leftcolumn">
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>





</div>




<div id="content"><p class id="pcenter"></div>
<div id="rightcol"> Right text goes here</div>
<div id="footer">
<div id="footerp">
<p> </p>

</div>  
</div>


    </body>

</html>

CSS


    body    {
margin: 0px;
padding: 0px;
        }
#header
        {
background-image: url(images/Logo.jpg);
background-size: 100%;
clear:both;
height:420px;
width:100%;
background-image:url(images/Logo.jpg);
background-repeat:no-repeat;


        }

#leftcolumn
        {
background: #b048b5;
float: left;
width: 19%;
height: 500px;
border-style:solid;
border-width: 5px;
border-color:#000001;

        }
#rightcol
        {
background: #b048b5;
float: right;
border-style:solid;
border-width: 5px;
border-color:#000001
width: 20%;
height: 500px;
        }


#content{
border-style:solid;
background:white;
border-width: 5px;
border-color:#000001;
float:left;
width: 60%;
height: 500px;
text-align: center;
font: 16px;

        }


#footer{
background: #000000;
clear: both;
font:16pt;
font:#FFFFFF;
width: 100%;
border-style:solid;
border-width: 1px;
border-color:#000001
        }       
#footerp
        {
color: white;
text-align: center;
        }           

#pcenter
        {
text-align:center;
        }











右文本在这里

CSS
身体{
边际：0px；
填充：0px；
}
#标题
{
背景图片：url（images/Logo.jpg）；
背景大小：100%；
明确：两者皆有；
高度：420px；
宽度：100%；
背景图片：url（images/Logo.jpg）；
背景重复：无重复；
}
#左列
{
背景：#b048b5；
浮动：左；
宽度：19%；
高度：500px；
边框样式：实心；
边框宽度：5px；
边框颜色：#000001；
}
#rightcol
{
背景：#b048b5；
浮动：对；
边框样式：实心；
边框宽度：5px；
边框颜色：#000001
宽度：20%；
高度：500px；
}
#内容{
边框样式：实心；
背景：白色；
边框宽度：5px；
边框颜色：#000001；
浮动：左；
宽度：60%；
高度：500px；
文本对齐：居中；
字体：16px；
}
#页脚{
背景：#000000；
明确：两者皆有；
字体：16pt；
字体：#FFFFFF；
宽度：100%；
边框样式：实心；
边框宽度：1px；
边框颜色：#000001
}       
#页脚
{
颜色：白色；
文本对齐：居中；
}           
#pcenter
{
文本对齐：居中；
}

将内容放在右栏前面

<div id="rightcol"> Right text goes here</div>
<div id="content"><p class id="pcenter"></div>

此处显示右文本

想想看，当你浮动时，内容会随着堆栈顶部的内容而折叠。

你的HTML标记无效。谢谢你，我对HTML和css不熟悉，这意味着什么。我有没有搞错什么应该在家里开始自我测试：谢谢美丽的编码器。我试过了，但似乎不行，我想知道……：）看看这个，玩一玩。它包含了供以后参考的基本技术。