子div不与父div中的另一个div对齐

Question

I'm having some trouble getting #divSocial to align itself inline with #divNavMenu. 我在使#divSocial与#divNavMenu内联对齐时遇到麻烦。 I've tried to float to the right, but all that does is expand the parent div, #divNavigation vertically and take those social icons down another line. 我试图向右浮动，但所有要做的就是垂直扩展父div，＃divNavigation，并将这些社交图标移到另一行。 It's probably some small piece of code, but I've been fuzzing with it for quite some time. 它可能只是一小段代码，但是我已经花了相当长一段时间了。

    <!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>Tutorials Index Page</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">
<a href="http://www.facebook.com/pages/Tutorialhelp/497024140318879" target="_blank"><img title="FacebookIcon" alt="FacebookIcon" src="../images/facebook.png" /></a>
<a href="https://twitter.com/Tutorial_Help" target="_blank"><img title="TwitterIco" alt="TwitterIcon" src="../images/twitter.png" /></a>
</div>
</div>
</div>
</div>
<div id="divContentContainer">
<div id="divWrapper">
<div id="divInnerWrapper">
<div id="divContent">
<div id="divBanner"></div>
<h2>Tutorials Index Page</h2>
<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 James Owen
</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 James Owen
</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 James Owen
</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"><span>Advertise Here</span></div>
<div class="adListing"><span>Advertise Here</span></div>
<div class="adListing"><span>Advertise Here</span></div>
<div class="adListing"><span>Advertise Here</span></div> 
<br class="clearFloat" />  
</div>
<div id="divDonate">
<h3>Support This Web Site!</h3>
<span>Donate to help the cost of running this site.</span>
<script type="text/javascript"> 
function validateAmount(amount){
    if(amount.value.match( /^[0-9]+(\.([0-9]+))?$/)){
        return true;
    }else{
        alert('You must enter a valid donation.');
        amount.focus();
        return false;
    }
}
</script>
<form action="https://checkout.google.com/cws/v2/Donations/701849125270859/checkoutForm" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" onSubmit="return validateAmount(this.item_price_1)" target="_top">
    <input name="item_name_1" type="hidden" value="Donations for Site"/>
    <input name="item_description_1" type="hidden" value="Donate for the cost of running the site."/>
    <input name="item_quantity_1" type="hidden" value="1"/>
    <input name="item_currency_1" type="hidden" value="USD"/>
    <input name="item_is_modifiable_1" type="hidden" value="true"/>
    <input name="item_min_price_1" type="hidden" value="0.01"/>
    <input name="item_max_price_1" type="hidden" value="25000.0"/>
    <input name="_charset_" type="hidden" value="utf-8"/>
    <table align="center" cellpadding="5" cellspacing="0" width="1%">
        <tr>
            <td align="right" nowrap="nowrap" width="1%">&#x24; <input id="item_price_1" name="item_price_1" onfocus="this.style.color='black'; this.value='';" size="11" style="color:grey;" type="text" value="Enter Amount"/>
            </td>
            <td align="left" width="1%">
                <input alt="Donate" src="https://checkout.google.com/buttons/donateNow.gif?merchant_id=701849125270859&amp;w=115&amp;h=50&amp;style=trans&amp;variant=text&amp;loc=en_US" type="image"/>
            </td>
        </tr>
    </table>
</form>
</div>
<div id="divSpacer"></div>
<fb:like-box href="http://www.facebook.com/pages/Tutorialhelp/497024140318879" width="300" show_faces="true" stream="true" header="true"></fb:like-box>
<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;
    background-image:url(../images/tutorialHelp.png);
    background-repeat: no-repeat;
    background-position: center;    

}

#divNavigation{
    height:32px;
    position:relative;
    background-color:#333;
    width:1120px;
}

#divNavMenu {
    width:900px;
    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;
    color: #FAA221;
}

#contactForm{
    padding:0px;
    display: block;
    height: auto;
    margin-top: 30px;
    margin-right: 160px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-weight: bold;
}

#divSidebar{
    float:right;
    width:337px;
}

#divInnerSideBar{
    width:300px;
    margin:0px auto;
}

#divAdWrapper{
    width:260px;
    height:auto;
    margin:0px 0px 0px 23px;
}

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

.adListing span{
    font-weight:bold;
    display:block;
    margin:56px auto;
    color:#83ACBC;
}

#divSpacer{
    display:block;
    margin:15px 0px 0px 0px;
}

#divDonate{
    margin-top: 25px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

#divDonate h3{
    text-align:center;
    text-decoration:underline;
}

#divDonate span{
    text-align:center;
    font-weight:bold;
}

#divAboutBio{
    padding:20px 20px 0px 18px;
}

#divAboutBio ul li{
    font-weight:bold;
}

#divSocial{
    float:right;
    height:32px;
    width:100px;
    display:block;

}

I've added both HTML and CSS and hopefully you will see where the problem(s) lay in the code. 我已经添加了HTML和CSS，希望您能看到问题在代码中的位置。 The goal is to have the #divNavigation have #divNavMenu on the left and #divSocial and on the right but on the same alignment. 目标是让#divNavigation在左侧具有#divNavMenu，在右侧具有#divSocial和右侧，但具有相同的对齐方式。

Answer 1

Add a float:left; 添加一个float:left; to #divNavMenu 到#divNavMenu

Answer 2

try putting float:left; 尝试把float：left; for divNavMenu and divSocial: 对于divNavMenu和divSocial：

#divNavMenu{
    float:left;
    width:900px;
    height:32px;
    margin-top: 7px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#divSocial{
    float:left;
    height:32px;
    width:100px;
    display:block;
}

Answer 3

i saw your code. 我看到了你的代码。 In the div #divSidebar, you are telling (float:right), float will work after assigning the position:absolute property only. 在div #divSidebar中，您正在告诉（float：right），仅在分配position：absolute属性后，float才能工作。 try this code. 试试这个代码。

#divSidebar{
    width:337px;
    position:absolute;
    top:138px;
    right:175px;
}

Answer 4

add this to your style 将此添加到您的样式

#divNavMenu {
display:inline-block;
vertical-align:top;
}
#divNavigation {
display:inline-block;
vertical-align:top;
}

displaying both #divNavMenu div and #divNavigation div as inline-block is better than the use of float and clear 将#divNavMenu div和#divNavigation div同时显示为内联块比使用float和clear更好

子div不与父div中的另一个div对齐

问题描述

4 个解决方案

解决方案1
0 2012-12-14 08:28:46

解决方案2
0 2012-12-14 08:30:32

解决方案3
0 2012-12-14 08:40:31

解决方案4
0 2014-05-11 11:34:26

子div不与父div中的另一个div对齐

问题描述

4 个解决方案

解决方案1 0 2012-12-14 08:28:46

解决方案2 0 2012-12-14 08:30:32

解决方案3 0 2012-12-14 08:40:31

解决方案4 0 2014-05-11 11:34:26

解决方案1
0 2012-12-14 08:28:46

解决方案2
0 2012-12-14 08:30:32

解决方案3
0 2012-12-14 08:40:31

解决方案4
0 2014-05-11 11:34:26