Question

我的主要内容与浮动的右列之间存在差距，我对它进行了修改，但似乎无法获得右列与主体之间的差距。

    <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;
        }

Answer 1

将内容放在右栏前面。

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

想想，当你浮动内容时会崩溃堆栈顶部的内容。

主要内容和浮动右列之间有差距

1 个答案: