我有一个包含图像和一段文本的网页，我试图将它们堆叠成一条垂直线。我想添加 display: block; .about div 将是这样做的适当方式。它为我提供了我想要的垂直堆栈，但会影响页面的整体布局。起初我以为它是将页眉部分拉到页面下方，但当我检查页面时，似乎这个命令实际上是将整个主体部分向下移动到页面下方。不确定是什么原因造成的。
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Name
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
<a href="resume.html">Resume</a>
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
<a href="writing_samples.html">Writing Samples</a>
</li>
<li>
<a href="photoshop.html">Photoshop</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="about_div">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
More Text
</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>
© 2016 My Name.
</p>
</div>
</body>
和 CSS:
body {
font-family: 'Playfair Display', open sans;
position: relative;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding-top: 18%;
}
.about_div {
display: block;
margin-top: 50px;
}
.about_div img {
margin-left: 125px;
}
.about_div h3 {
margin-top: 50px;
margin-right: 1%;
}
.about_div p {
margin-right: 1%;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
标题间距应该如何(使用内联 block )
应用显示时标题间距实际看起来如何: block 
请注意，这在技术上不是 header 的问题，而是在第二个示例中整个正文部分都向下移动。
最佳答案
从 '.about_div' 中删除 display:block 并将 display:flex 添加到 '#wrapper'
关于html - 显示 block 移动整个 body 部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35831397/