1
我遇到了一個小問題，我的div中有一個#divSidebar沒有包裹它的子div。這可能是我可能忽略的一些小事，但我已經在相當長的一段時間裏忙得不亦樂乎了。我相信這與失蹤有關。我可以把內容放到一邊，但我必須添加一個漂浮在右邊的innerSideBar div。Parent Div未包裹其子div - 缺少clearFloat可能是問題
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Welcome to TutorialHelp!</title>
<link href="css/tutorialHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="divHeaderContainer">
<div id="divHeader">
<div id="divLogo"></div>
<div id="divNavigtation">
<div id="divNavMenu">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="Tutorials/index.html">Tutorials</a>
<ul>
<li><a href="Photoshop/index.html">Photoshop</a>
<li><a href="Dreamweaver/index.html">Dreamweaver</a>
<li><a href="Illustrator/index.html">Illustrator</a>
<li><a href="Flash/index.html">Flash</a>
<li><a href="InDesign/index.html">InDesign</a>
</ul>
</li>
<li><a href="Articles/index.html">Articles</a></li>
<li><a href="About/index.html">About</a></li>
<li><a href="Contact/index.html">Contact</a></li>
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div>
<div id="divSocial"></div>
</div>
</div>
</div>
<div id="divContentContainer">
<div id="divWrapper">
<div id="divInnerWrapper">
<div id="divContent">
<div id="divBanner"></div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="The Basics Of Photoshop">
<img width="200px" height="200px" src="images/photoshopBasicsImage.jpg" alt="PhotoshopBasicsImage" title="PhotoshopBasicsImage" />
</a>
<span class="metaWrapper">Photoshop</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
<a href="#" title="Link to the Tutorials Page">Tutorials</a>
>>
<a href="#" title="Link to the Photoshop Page">Photoshop</a>
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1><a href="#" title="The Basics Of Photoshop">The Basics Of Photoshop</a></h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Building A Basic Web Page In Dreamweaver">
<img width="200px" height="200px" src="images/dreamweaverBasicWebPageImage.jpg" alt="DreamweaverBasicWebPageImage" title="DreamweaverBasicWebPageImage" />
</a>
<span class="metaWrapper">Dreamweaver</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
<a href="#" title="Link to the Tutorials Page">Tutorials</a>
>>
<a href="#" title="Link to the Photoshop Page">Dreamweaver</a>
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1><a href="#" title="The Basics Of Photoshop">Building A Basic Web Page In Dreamweaver</a></h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Designing A Cartoon Environment">
<img width="200px" height="200px" src="images/flashCartoonEnvironmentImage.png" alt="FlashCartoonEnvironmentImage" title="FlashCartoonEnvironmentImage" />
</a>
<span class="metaWrapper">Flash</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
<a href="#" title="Link to the Tutorials Page">Tutorials</a>
>>
<a href="#" title="Link to the Photoshop Page">Flash</a>
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1><a href="#" title="The Basics Of Photoshop">Designing A Cartoon Environment</a></h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divBottomBanner"></div>
</div>
<div id="divSidebar">
<div id="divInnerSideBar">
<div id="divAdWrapper">
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<br class="clearFloat" />
</div>
<fb:comments href="http://www.facebook.com/pages/Tutorialhelp/497024140318879"
num_posts="4" width="300"></fb:comments>
<fb:like href="http://www.facebook.com/pages/Tutorialhelp/497024140318879" send="true" width="285" show_faces="true" font="verdana"></fb:like>
<div class="clearFloat"></div>
</div>
</div>
<div class="clearFloat"></div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
min-width:1300px;
background-color:#83ACBC;
}
#divHeaderContainer{
width:100%;
height:200px;
background-color:#CEDBD9;
margin:0px auto;
}
#divHeader{
width:1120px;
height:200px;
min-width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r1_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divLogo{
height:130px;
}
#divNavigation{
height:32px;
position:relative;
background-color:#333;
width:1120px;
}
#divNavMenu {
width:auto;
height:32px;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#divNavMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#divNavMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#DCE4E3;
}
#divNavMenu ul li a {
text-align:center;
height:30px;
width:148px;
display:block;
color:#000;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
border:1px solid #C5D1D0;
font-size: 16px;
font-weight: bold;
}
#divNavMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#divNavMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
#divNavMenu li:hover {
background:#83ACBC;
}
#divNavMenu ul li:hover ul li a:hover {
color:#FFF;
background:#9EBECB;
}
#divNavMenu a:hover {
color:#FFF;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
height:0px;
overflow:hidden;
}
/* IE7 Display Fix */
#divNavMenu ul li {
display: inline;
}
#divContentContainer{
margin:0px auto;
padding-bottom:50px;
width:100%;
background-image: url(../images/backgroundImage_r1_c1_r3_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divWrapper{
width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r2_c1.jpg);
background-repeat: repeat-y;
background-position: center;
}
#divInnerWrapper{
margin:0px auto;
width:1088px;
}
#divContent{
width:738px;
float:left;
margin:0px auto;
}
#divBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
background-color:#D3DCDA;
}
#divListing{
padding:20px 20px 0px 18px;
margin:15px 0px 0px 0px;
}
.listing{
height:auto;
background:none;
border-bottom:solid 1px #B7B7B7;
}
#divListingLeft{
width:200px;
float:left;
margin:0px 0px 20px 0px;
}
#divListingRight{
width:480px;
float:right;
}
.metaWrapper{
font-family:Verdana, Geneva, sans-serif;
display:block;
width:200px;
font-size:14px;
text-align:center;
font-weight:bold;
color:#000;
}
.tags{
font-style:italic;
}
.date{
font-style:italic;
}
#divContent #divListing p{
padding:0 20px 0px 10px;
}
#divContent #divListing h1{
font-size:26px;
color:#000;
padding:0px 20px 0px 10px;
margin:0px;
}
h1 a{
font-style:normal;
text-decoration:none;
color:#000;
}
#divBottomBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
margin-top:35px;
background-color:#D3DCDA;
}
h2{
font-weight:bold;
font-size:24px;
margin:30px 0px 0px 20px;
padding-bottom:5px;
border-bottom:solid 1px #B7B7B7;
}
#contactForm{
padding:0px;
display: block;
height: auto;
margin-top: 30px;
margin-right: 160px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
}
#divSidebar{
}
#divInnerSideBar{
width:300px;
float:right;
}
#divAdWrapper{
width:260px;
height:auto;
}
.adListing{
display:block;
font-size:11px;
background-color:#D3DCDA;
color:#000;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
width:125px;
height:125px;
margin: 0px 4px 4px 0px;
}
我已經添加了html和css代碼，並希望這將幫助您查看問題在代碼中的位置。代碼的任何其他問題都可以提出來，但是尋找#divSidebar及其子內容的解決方案。
感謝。之前我已經將這個div浮動了，但是我認爲它受到了影響，因爲我之前也有一定的寬度。 #divSideBar { float：right; width：300px; } 之前我保存它，但它造成了問題。 –
或 - display：inline-block; –