为什么我的嵌套div会压低我的内容？

Question

所以我试图将我的div“标题”放在我的“标题”div中。问题是我试图将它放在我的图像和我的“社交”标题之间，但它只是重叠并推动div。如何将它放在两者之间以便能够放置文本以便我可以制作标题？

  	body {
    		background : #b3d9ff;
    		margin : 0;
    		padding: 0;
    		font-family : Futura;
    	}
    	#wrapper {
    		width: 960px;
    		height: auto;
    		background: #cce5ff;
    		border-left: 5px solid #737373;
    		border-right: 5px solid #737373;
    		overflow : auto;
    		margin : 0 auto;
    		padding: 10px;
    	}
    	#header {
    		width:100%;
    		height:100px;
    		border-bottom: 3px solid #000;
    		clear: right;
    	}
    	#header > img {
    		margin: 15px 0px 0px 0px;
    	}
    	#social {
    		float: right;
    		margin: 20px 30px 0px 0px;
    	}
    	#social ul li {
    		float: left;
    		list-style: none;
    		padding-right: 5px;
    	}
    	#sidebar {
    		float: left;
    		width: 275px;
    		height: 100%;
    	}
    	#menu {
    		float: left;
    		height: auto;
    		width: 200px;
    	}
    	#menu ul li {
    		list-style : none;
    		padding: 0px;
    		text-align: center;
    	}
    	#menu ul li a {
    		color: #666666;
    		text-decoration: none;
    		display: block;
    	}
    	#menu ul li a:visited{
    		color:purple;
    	}
    	#menu ul li a:hover {
    		color:black;
    	}
    	#content {
    		float: left;
    		width: 655px;
    		height: 100%;
    		padding-left: 15px;
    		letter-spacing : 1;
    		border-left: 3px solid black;
    	}
    	h1 {
    		text-align: center;
    		padding : 5px;
    		border-bottom: 1px solid black;
    	}
    	p {
    		text-indent: 50px;
    		line-height: 25px;
    	}
    	.top a {
    		color : #666666;
    		text-decoration: none;
    	}
    	#readMore {
    		text-align: right;
    	}
    	#readMore a:visited {
    		color:purple;
    	}
    	#footer {
    		clear: both;
    		width: 100%;
    		height: 80px;
    		color: black;
    		border-top: 3px solid black;
    	}
    	h5 {
    		text-align: center;
    		color: #666666;
    	}
    	#title {
    		position relative
    	}

   <div id="wrapper">
    	<div id="header">
    		<div id="title"><h2>Title centered in header</h2></div>
    		<a name="top"></a>
    				<img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
    		<div id="social">
    			<ul>
    				<li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55"alt="github" title="github"></a></li>
    			</ul>
    		</div> <!-- End of social -->
    	</div> <!-- End of header -->
    	<div id="sidebar">
    		<div id="menu">
    			<ul>
    				<li><h4><a href="index.html">Home</a></h4></li>
    				<li><h4><a href="overview">Overview</a></h4></li>
    			</ul>
    		</div> <!-- End of menu -->
    	</div> <!-- End of sidebar -->
    	<div id="content">
    
    <a name="overview"><h1>Overview</h1>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">
    Sample
    </pre>
    <div class="top"><h4><a href="#top">Back To Top</a></h4></div>
    
    
    	</div> <!-- End of content -->
    	<div id="footer">
    		<h5>2016 &copy Brayan Rafael Gallardo </br><a href="mailto:?subject=Sample">Contact me</a></h5>
    	</div>
    </div> <!-- End of wrapper -->
    
 

Answer 1

你犯了一个简单的错误，你将header的高度硬编码为100px;

只需将此设置为自动。

检查Fiddle

Answer 2

尝试添加＆＃34; float：right＆＃34;标题元素的风格。您可能还想查看flexbox，这使得像这样的对齐非常简单，并且比浮动更容易让人头脑发热。 Here's a great resource to get you started.

Answer 3

所以，我做了什么，我改变了标志的位置，我把它放在你的标题之前，然后我用flexbox中心它

  body {
        background : #b3d9ff;
        margin : 0;
        padding: 0;
        font-family : Futura;
    }
    #wrapper {
        width: 960px;
        height: auto;
        background: #cce5ff;
        border-left: 5px solid #737373;
        border-right: 5px solid #737373;
        overflow : auto;
        margin : 0 auto;
        padding: 10px;
    }
    #header {
        width:100%;
        height:100px;
        border-bottom: 3px solid #000;
        clear: right;
        display:flex;
  flex-direction:row;
  justify-content:space-between;
    }
    #header > img {
        margin: 15px 0px 0px 0px;
    }
    #social {
        float: right;
        margin: 20px 30px 0px 0px;
    }
    #social ul li {
        float: left;
        list-style: none;
        padding-right: 5px;
    }
    #sidebar {
        float: left;
        width: 275px;
        height: 100%;
    }
    #menu {
        float: left;
        height: auto;
        width: 200px;
    }
    #menu ul li {
        list-style : none;
        padding: 0px;
        text-align: center;
    }
    #menu ul li a {
        color: #666666;
        text-decoration: none;
        display: block;
    }
    #menu ul li a:visited{
        color:purple;
    }
    #menu ul li a:hover {
        color:black;
    }
    #content {
        float: left;
        width: 655px;
        height: 100%;
        padding-left: 15px;
        letter-spacing : 1;
        border-left: 3px solid black;
    }
    h1 {
        text-align: center;
        padding : 5px;
        border-bottom: 1px solid black;
    }
    p {
        text-indent: 50px;
        line-height: 25px;
    }
    .top a {
        color : #666666;
        text-decoration: none;
    }
    #readMore {
        text-align: right;
    }
    #readMore a:visited {
        color:purple;
    }
    #footer {
        clear: both;
        width: 100%;
        height: 80px;
        color: black;
        border-top: 3px solid black;
    }
    h5 {
        text-align: center;
        color: #666666;
    }
    #title {
        position relative
       
    }

<body>

<div id="wrapper">
    <div id="header">
    
     <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
        <div id="title">
        <h2>Title centered in header</h2></div>
        <a name="top"></a>
        <div id="social">
            <ul>
                <li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55"alt="github" title="github"></a></li>
            </ul>
        </div> <!-- End of social -->
    </div> <!-- End of header -->
    <div id="sidebar">
        <div id="menu">
            <ul>
                <li><h4><a href="index.html">Home</a></h4></li>
                <li><h4><a href="overview">Overview</a></h4></li>
            </ul>
        </div> <!-- End of menu -->
    </div> <!-- End of sidebar -->
    <div id="content">

<a name="overview"><h1>Overview</h1>
<pre style="word-wrap: break-word; white-space: pre-wrap;">
Sample
</pre>
<div class="top"><h4><a href="#top">Back To Top</a></h4></div>


    </div> <!-- End of content -->
    <div id="footer">
        <h5>2016 &copy Brayan Rafael Gallardo </br><a href="mailto:?sub

Answer 4

将硬编码值放在不需要的位置（例如应根据浏览器窗口大小而变化的边距），而不是使用em，vw或％值，这是不好的做法。严格使用HTML进行结构化不要在代码中放置高度，宽度等。始终使用CSS来达到这种造型目的。

不要像@Roman所说的那样将标题设置为100px，这真的很糟糕。 使用position: relative; float:left;和display: inline-block;可以在标题内获得所需的title，social和img结果。

以下是代码：

body {
    		background : #b3d9ff;
    		margin : 0;
    		padding: 0;
    		font-family : Futura;
    	}
    	#wrapper {
    		width: 960px;
    		height: auto;
    		background: #cce5ff;
    		border-left: 5px solid #737373;
    		border-right: 5px solid #737373;
    		overflow : auto;
    		margin : 0 auto;
    		padding: 10px;
    	}
    	#header {
    		width:100%;
    		height:auto;
    		border-bottom: 3px solid #000;
    		clear: right;
    	}
    	#header > img {
    		margin: 1em 0 0 0;
            width: 232px;
            height: 101px;
            position: relative;
            float:left;
    	}
    	#social {
    	  position: relative;
    		float: right;
            display:inline-block;
    		margin: 1em 1.2em 0 0;
    	}
     
    	#social ul li {
    		float: left;
    		list-style: none;
    		padding-right: 5px;
    	}
    	#sidebar {
    		float: left;
    		width: 275px;
    		height: 100%;
    	}
    	#menu {
    		float: left;
    		height: auto;
    		width: 200px;
    	}
    	#menu ul li {
    		list-style : none;
    		padding: 0px;
    		text-align: center;
    	}
    	#menu ul li a {
    		color: #666666;
    		text-decoration: none;
    		display: block;
    	}
    	#menu ul li a:visited{
    		color:purple;
    	}
    	#menu ul li a:hover {
    		color:black;
    	}
    	#content {
    		float: left;
    		width: 655px;
    		height: 100%;
    		padding-left: 15px;
    		letter-spacing : 1;
    		border-left: 3px solid black;
    	}
    	h1 {
    		text-align: center;
    		padding : 5px;
    		border-bottom: 1px solid black;
    	}
    	p {
    		text-indent: 50px;
    		line-height: 25px;
    	}
    	.top a {
    		color : #666666;
    		text-decoration: none;
    	}
    	#readMore {
    		text-align: right;
    	}
    	#readMore a:visited {
    		color:purple;
    	}
    	#footer {
    		clear: both;
    		width: 100%;
    		height: 80px;
    		color: black;
    		border-top: 3px solid black;
    	}
    	h5 {
    		text-align: center;
    		color: #666666;
    	}
    	#title {
    		position relative;
           float:left;
           margin: 1.1em 0 0 7em;
    	}

 <div id="wrapper">
    	<div id="header">
        <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png"  alt="Logo" title="python">
    		<div id="title"><h2>Title centered in header</h2></div>
    		<a name="top"></a>
    				
    		<div id="social">
    			<ul>
    				<li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55"alt="github" title="github"></a></li>
    			</ul>
    		</div> <!-- End of social -->
    	</div> <!-- End of header -->
    	<div id="sidebar">
    		<div id="menu">
    			<ul>
    				<li><h4><a href="index.html">Home</a></h4></li>
    				<li><h4><a href="overview">Overview</a></h4></li>
    			</ul>
    		</div> <!-- End of menu -->
    	</div> <!-- End of sidebar -->
    	<div id="content">
    
    <a name="overview"><h1>Overview</h1>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">
    Sample
    </pre>
    <div class="top"><h4><a href="#top">Back To Top</a></h4></div>
    
    
    	</div> <!-- End of content -->
    	<div id="footer">
    		<h5>2016 &copy Brayan Rafael Gallardo </br><a href="mailto:?subject=Sample">Contact me</a></h5>
    	</div>
    </div> <!-- End of wrapper -->
    

Answer 5

好的...当你试图保持介于两者之间时......尝试将东西保存在其他两个东西之间......使用display：inline-block将其他元素保持在同一行...因为你想要社交形象在右侧...使用display：带有#title的内联块和带有社交图像的float：右带

        #wrapper {
        width: 960px;
        height: auto;
        background: #cce5ff;
        border-left: 5px solid #737373;
        border-right: 5px solid #737373;
        overflow : auto;
        margin : 0 auto;
        padding: 10px;
    }
    #header {
        width:100%;
        height:100px;
        border-bottom: 3px solid #000;
        display:inline-block;

    }
    #header > img {
        float:left;
        margin: 15px 0px 0px 0px;
    }

    #title{ 
        width:50%;
        text-align:center;
        display:inline-block;
    }

    #social {
        float: right;
        margin: 20px 30px 0px 0px;
    }


<div id="header">
        <div id="title"><h2>Title centered in header</h2></div> 
        <a name="top"></a>
              <img src="your image" width="232" height="101" alt="Logo" title="python">

        <div id="social">
            <a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55"alt="github" title="github"></a>         
        </div> <!-- End of social -->
    </div>