个人中心
gpt4 book ai didi

html - 父 Div 未环绕其子 div - 缺少 clearFloat 可能是问题所在

转载 作者：太空宇宙 更新时间：2023-11-03 18:55:20 25 4
gpt4 key购买 nike

我的一个 div 有一个小问题，#divSidebar 没有环绕它的子 div。这可能是我可能忽略的小东西，但我已经为它烦恼了很长一段时间。我相信这与失踪有关。我可以将内容移到一边，但我必须添加一个 float 到右侧的 innerSideBar div。 

    <!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 及其子内容的解决方案。

最佳答案

定义你的divSidebar

#divSidebar{
float:right;
}

demo

关于html - 父 Div 未环绕其子 div - 缺少 clearFloat 可能是问题所在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13639246/

25 4 0
文章推荐： css - 网站本地化(或本地化)
文章推荐： python - 在 PyQt 中创建小部件后如何执行代码？
文章推荐： python - 如何从列表字段访问属性
文章推荐： css - 单击 div 到底层元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com