div中的垂直对齐元素

Question

我看过几个类似的问题，但没有给出一个可以完全解决我的特定问题的答案。

我正在创建一份简历文档，我有两个div并排浮动，左侧是标题（工作经验，学历等），右侧是详细信息（公司名称，职务等），并且它们垂直对齐在页面上。

我想知道如何将左div中的标题的垂直对齐方式与右div中的详细信息结合使用。 例如，我有几个p代表工作经验的详细信息，我希望我的下一个标题在这些标题下方垂直对齐，以便位于适当的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 &middot <a href="mailto:mail@gmail.com">mail@gmail.com</a> &middot 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> 

Answer 1

一种解决方案是为每个“块”赋予其自己的左右元素。 这样，每个块都是独立的：左侧是标题，右侧是一些内容。 块中的任何内容都会增加块的高度并向下推下一个块。

在下面，我使用“ clearfix”方法在每对之后清除浮点数。

 .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 。

inline-block ：元素生成一个block元素框，该框将与周围的内容一起流动，就好像它是单个inline box一样（与被替换的元素非常相似）
源显示@ MDN

但是，请注意， inline-block将尊重（并显示）元素之间的空白。 width:50%两个相邻元素将不能排成一行，而是换行到下一行（因为50％+ 50％+空格> 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技巧：争夺嵌入式块元素之间的空间
• StackOverflow：如何删除行内块元素之间的空间？

编辑：

还有另一种方法利用CSS display:table ， display:table-row和display:table-cell来显示内容，类似于HTML表格（但出于布局目的 ，可能不会非语义地使用表格 ）。 这不是我最喜欢的方法，但是它的应用取决于上下文。

 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> 

Answer 2

好的，首先您会遇到一些标记和可读性问题：

标头中的h *开头为h2，结尾为h3，没有人想要。 另外，您有一个关闭的div标签拼写为/ dv

另外，您的代码在div上有点过分依赖，请尝试一些html5标记。 您可以将header用作标题，将footer用作页脚，将main用作内容。 这使代码对人类，浏览器和屏幕阅读器更具可读性。

另外，我建议始终使用双倍行距并适当缩进代码； 在一页这样的文档上看似微不足道，但是现在确实可以养成良好的习惯了。 同时，它也使您的工作更加轻松。

我继续整理您的代码； 我记得刚开始时缩进哪里并不总是很明显。

最后是您的问题：

您是否考虑过只使用桌子？ 您所描述的布局听起来对我来说就像一张桌子。 请记住，仅因为它是一张桌子并不意味着它必须有边框，您可以根据需要对其进行样式设置。 我将在下面提供一个小示例。

清理代码：

<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 &middot <a href="mailto:mail@gmail.com">mail@gmail.com</a> &middot 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>

每个列中的第一列代表第一列，第二列代表第二列。

祝好运！

Answer 3

您可以通过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 &middot <a href="mailto:mail@gmail.com">mail@gmail.com</a> &middot 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>