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>