好的,2天和多个论坛,哦,然后重新启动整个CSS文件。仍然会得到相同的结果,所以我总是会遇到这个问题,直到我或有人弄清楚了。

我的导航栏和1st content + sidebar后面有一个白色的方框。它把我的侧边栏扔掉了。以及其他我更改内容以解决问题的方法。我两天前才开始学习CSS,所以现在您知道为什么我遇到这个问题了:)。一个简单的解决办法

第一张照片,盒子是黑色的。我将所有分配为黑色的项目更改为白色。盒子变白了。将项目改回黑色,保持白色。第一张图片的横幅div底部有一个紫色条,但您可以在顶部看到它。

![在此处输入图片描述] [1]

第2张图片是白色,我将内容着色为粉红色,因为它是白色且很难看清

![在此处输入图片描述] [2]



HTML代码是

    <!DOCTYPE HTML>
<html>
    <head>
        <title>Welcome To MIZPHIT.Com!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    </head>

    <body>

        <div id="wrapper">

            <div id="banner">
                <div id="logo">
                    <img src="images/logo.jpg">
                </div>
                <div id="bannerfill">
                    <p>Advertise Here!</P>
                    <img src="images/fillpic.jpg">
                </div>
            </div>

            <div id="navbar">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="http://www.twitch.tv/mizphitgaming">Twitch Home</a></li>
                        <li><a href="http://www.youtube.com/user/MizphitGaming">Youtube Home</a></li>
                        <li><a href="FantasyGames/index.html">Fantasy Games Home</a></li>
                    </ul>
            </div>
            <div id="content">
                <p>Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   </P>
            </div>

            <div id="content2">
                <p>Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   </P>
            </div>
            <div id="sidebar">
                <p>Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   Paragraph   </P>
            </div>
            <div id="footer">
                <div id="footlogo"><img src="images/Logo1.png"></div>
            </div>

        </div>
    </body>

</html>




CSS代码减去重置的CSS。我把它拿出来,它仍然在那里。

#wrapper { width:1024px; margin:0px auto; background-color:#ffffff; }

#banner {  background-color:#000000; width:100%; padding:20px 0; overflow:hidden; }

#logo { margin:0 0 0 10px; float:left; }

#bannerfill { float:right; width:200px; margin:0 10px 0 0; }
#bannerfill p { float:right; color:#ffffff; float:right; font-size:11px; margin:4px 10px 4px 0px; }
#bannerfill img { float:right; width:50px; height:50px; }

#navbar ul { width:100%; float:left; margin:0px; background-color:#FFCC00; }
#navbar ul li { display:inline; }
#navbar ul li a { float:left;  padding:10px 20px; }

#navbar a:link    {color:#ffffff; }
#navbar a:visited {color:#ffffff; }
#navbar a:active  {color:#ffffff; }
#navbar a:hover   {color:#ffffff; background-color:#CC00FF; }
#navbar a:focus   {color:#ffffff; }

#content { float:left; width:700px; padding:10px; margin:5px; background-color:#FF99CC; border:1px FFCC00 solid; }

#content2 { float:left; width:700px; padding:10px; margin:5px; background-color:#ffffff; border:1px FFCC00 solid; }

#sidebar { float:right; width:200px; padding:0 5px 5px 5px; margin:0 5px 5px 0; background-color:#ffffff; border:1px FFCC00 solid; }

#footer { width:100%; height:175px; padding:0px; text-align:center; background-color:FFCC00; }
#footlogo { width:100%; height:100%; }


好的,您必须弄清楚我没有图片的意思,因为此网站不允许我这样做。如果您了解我在说什么,肯定会更容易。

任何帮助都将不胜感激。此问题修复将使我再次前进,并希望自从我听到后便不停地前进,并且确实相信CSS确实没有那么难。只是要习惯它。提前致谢

最佳答案

尚不清楚您要做什么,但我发现您的页脚正在加速,您需要添加一个

clear: both;


到您的页脚。

同样,如果您只是想将右侧的列移到右侧,则两个内容块都必须在一个div浮动到左侧,而侧边栏浮动在右侧的位置。然后在页脚中添加透明内容,这样您就很稳固。

您的问题是您有一个div向左浮动,另一个div向左浮动,然后您试图基于两个div都向左浮动而将div向右浮动,这根本行不通。

10-05 20:39
查看更多