我已经查看了几个类似的问题，但没有找到一个能够解决我的具体问题的答案。
我正在建立一份简历文件，我有两个并排浮动的div，左边是标题（工作经验，教育等），右边是详细信息（公司名称，职责等），他们在页面上垂直对齐。
我想知道如何将左div中标题的垂直对齐方式与右div中的详细信息结合起来。例如，我有几个关于工作经验的详细信息，我希望我的下一个标题在这些标题下方垂直对齐，以便位于相应的p元素旁边。
body {
height: 100%;
width: 100%;
background-color: #fffffc;
font-family: Times, serif;
}
.wrapper {
margin: 1em;
padding: 1em;
}
#header {
height: 5em;
width: 90%;
margin: auto auto 0px auto;
;
border-bottom: 4px solid black;
padding: 1em 1em 0 1em;
}
#header_name {
border-bottom: 1px solid #66ccff;
margin-bottom: 2px;
}
#header_contact {
margin: 2px auto auto auto;
padding-top: 2px;
}
.left {
float: left;
margin-right: 2em;
margin-left: 3em;
display: table;
}
.work_left {
display: table-cell;
float: left;
clear: left;
padding-bottom: 400px;
}
.volunteer_left {
display: table-cell;
float: left;
clear: left;
padding-top: 45px;
}
.education_left {
display: table-cell;
float: left;
clear: left;
}
.skills_left {
display: table-cell;
float: left;
clear: left;
}
#work_head {} #volunteer_head {} #education_head {} #skills_head {} .right {
width: 60%;
display: table;
margin-right: 3em;
}
.work_right {
margin-bottom: 2px;
padding-bottom: 2px;
}
h5 {
margin-top: 2px;
padding-top: 2px;
}
.work_def {
text-align: justify;
text-justify: inter-word;
}
#org_name {
float: right;
}
#location {
float: right;
}<div>
<div class="wrapper">
<div id="header">
<h2 id="header_name">First Last
</h3>
<p id="header_contact">555.555.5555 · <a href="mailto:mail@gmail.com">mail@gmail.com</a> · City, State
</p>
</div>
<div id="content">
<div class= "left">
<h3 class="work_left" id="work_head">Work Experience</h3>
<h3 class="volunteer_left" id="volunteer_head">Volunteer Experience</h3>
<h3 class="education_left" id="education_head">Education</h3>
<h3 class="skills_left" id="skills_head">Special Skills</h3>
</div>
<div class="right">
<h4 class="work_right">Job Title <span id="org_name">Company Name</span></h4>
<h5>July 2013 - Present <span id="location">City, State</span></h5>
<p class="work_def">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p class="volunteer"></p>
<p class="education"></p>
<p class="skills"></p>
</dv>
</div>
<div id="footer">
</div>
</div>
</div>
答案 0 :(得分：3)
一个解决方案是给每个＆＃34;块＆＃34;它自己的左右元素。这样，每个块都是自包含的：左侧是标题，右侧是一些内容。块中的任何内容都会增加块的高度，并按下下一个块。
下面，我在每对之后使用"clearfix" method来清除浮动。
.group:after {
content: "";
display: table;
clear: both;
}
div.entry h3 {
float: left;
width:50%;
}
div.entry div.content {
float: right;
width:50%;
}<div class="entry group">
<h3>Work Experience</h3>
<div class="content">
<h4>Job Title Company Name</h4>
<h5>July 2013 - Present City, State</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Volunteer Experience</h3>
<div class="content">
<p>volunteer</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Education</h3>
<div class="content">
<p>education</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Special Skills</h3>
<div class="content">
<p>skills</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
如GCyrillus所述，您可以使用CSS display属性完全避免浮动内容。下面，我使用display:inline-block。
内联块：该元素生成一个块元素框，该框元素框将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素） 来源display @ MDN
但是，请注意inline-block将尊重（并显示）元素之间的空白区域。具有width:50%的两个相邻元素将不会放在一行中并将换行到下一行（因为50％+ 50％+空格＆gt; 100％）。出于这个原因，我在我的示例中调整了元素宽度。其他处理空白区域的方法可以在代码段下面找到。
div.entry h3,
div.entry div.content {
display:inline-block;
width:45%;
vertical-align:top;
}<div class="entry group">
<h3>Work Experience</h3>
<div class="content">
<h4>Job Title Company Name</h4>
<h5>July 2013 - Present City, State</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Volunteer Experience</h3>
<div class="content">
<p>volunteer</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Education</h3>
<div class="content">
<p>education</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Special Skills</h3>
<div class="content">
<p>skills</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
有关处理空白区域的更多信息，请参阅：
另一种方法是利用CSS display:table，display:table-row和display:table-cell来显示与HTML表格类似的内容（但non-semantic use of a table可能不会layout purposes ）。这不是我最喜欢的方法，但它的应用程序取决于上下文。
div.container {
display: table;
}
div.entry {
display: table-row;
}
div.entry h3,
div.entry div.content {
display: table-cell;
}
div.entry h3 {
white-space:nowrap;
padding: 0 3em 0 0;
}<div class="container">
<div class="entry group">
<h3>Work Experience</h3>
<div class="content">
<h4>Job Title Company Name</h4>
<h5>July 2013 - Present City, State</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor
ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Volunteer Experience</h3>
<div class="content">
<p>volunteer</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor
ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Education</h3>
<div class="content">
<p>education</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor
ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
<div class="entry group">
<h3>Special Skills</h3>
<div class="content">
<p>skills</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor
ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
</div>
</div>
</div>
答案 1 :(得分：0)
首先，你有一些标记和可读性问题：
标题中的h *以h2开头，以h3结尾，没有人想要。你还有一个结束div标签拼写错误为/ dv
另外你的代码有点过于依赖div了，给出一些html5标记。您可以使用页眉作为页眉，页脚为页脚，主页为内容。这使得代码对于人类，浏览器和屏幕阅读器更具可读性。
另外，我建议始终使用双倍间距并正确缩进代码;在像这样的单页文档上看起来似乎微不足道，但现在确实养成了良好的习惯，这真的得到了回报。此外，它可以帮助您更轻松。
我继续清理你的代码;我记得当我第一次开始时，并不总是显而易见的缩进。
最后你的问题：
你考虑过只使用一张桌子吗？您描述的布局听起来就像一张桌子给我。请记住，仅仅因为它是一张桌子并不意味着它必须有边框，你可以随心所欲地设计它。我将在下面加一个小例子。
清理代码：
<head>
<link type="text/css" rel="stylesheet" href="html resume style.css"/>
<title>First Last's Resume</title>
</head>
<body>
<div>
<div class="wrapper">
<div id="header">
<h2 id="header_name">First Last</h3>
<p id="header_contact">555.555.5555 · <a href="mailto:mail@gmail.com">mail@gmail.com</a> · City, State</p>
</div>
<div id="content">
<div class= "left">
<h3 class="work_left" id="work_head">Work Experience</h3>
<h3 class="volunteer_left" id="volunteer_head">Volunteer Experience</h3>
<h3 class="education_left" id="education_head">Education</h3>
<h3 class="skills_left" id="skills_head">Special Skills</h3>
</div>
<div class="right">
<h4 class="work_right">Job Title <span id="org_name">Company Name</span></h4>
<h5>July 2013 - Present <span id="location">City, State</span></h5>
<p class="work_def">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p class="volunteer"></p>
<p class="education"></p>
<p class="skills"></p>
</dv> <!-- End of Digital Velociraptor? -->
</div>
<div id="footer">
</div>
</div>
</div>
这是一个可能适合您的表格示例：
<table id="content">
<tr>
<td class="work_left" id="work_head">Work Experience</td>
<td>I've done all kinds of stuff</td>
</tr>
<td class="volunteer_left" id="volunteer_head">Volunteer Experience</td>
<td>6 months, Stephen Hawking's wheelchair</td>
</tr>
</table>
每个代表第一列，第二列代表第二列。
祝你好运！答案 2 :(得分：0)
你可以通过DIVs或Table来完成.....这里我已经回答了使用完整代码的表格
body {
height: 100%;
width: 100%;
background-color: #fffffc;
font-family: Times, serif;
}
.wrapper {
margin: 1em;
padding: 1em;
}
#header {
height: 5em;
width: 90%;
margin: auto auto 0px auto;
border-bottom: 4px solid black;
padding: 1em 1em 0 1em;
}
#header_name {
border-bottom: 1px solid #66ccff;
margin-bottom: 2px;
}
#header_contact {
margin: 2px auto auto auto;
padding-top: 2px;
}
h5 {
margin-top: 2px;
padding-top: 2px;
}
#content{
width:1024px;
margin:0px auto;
}
#resume{
width:100%;
padding:10px;
}
#resume td{
padding-bottom:10px;
}
.header{
width:250px
}
.work_right {
margin-bottom: 2px;
padding-bottom: 2px;
}
h5 {
margin-top: 2px;
padding-top: 2px;
}
#org_name {
float: right;
}
#location {
float: right;
}<div class="wrapper">
<div id="header">
<h2 id="header_name">First Last
</h3>
<p id="header_contact">555.555.5555 · <a href="mailto:mail@gmail.com">mail@gmail.com</a> · City, State
</p>
</div>
<div id="content">
<table id="resume">
<tr>
<td class="header"><h3><h3></td>
<td ><h4 class="work_right">Job Title <span id="org_name">Company Name</span></h4>
<h5>July 2013 - Present <span id="location">City, State</span></h5></td>
</tr>
<tr>
<td class="header"><h3>Work Experience<h3></td>
<td>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
</tr>
<tr>
<td class="header"><h3>Volunteer Experience<h3></td>
<td>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
</tr>
<tr>
<td class="header"><h3>Education<h3></td>
<td>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
</tr>
<tr>
<td class="header"><h3>Special Skills</h3></td>
<td>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
</tr>
</table>
</div>
<div id="footer">
</div>
</div>