html - 无法在水平行中分隔三个 div

Question

我仍然掌握 CSS/HTML 标记的窍门。在处理模拟站点 UI 的类元素时，我正在处理个人资料页面，但无法让生物文本不包含在其他内容周围。我只希望配置文件组的每个组件位于其他组件上方的单独框中。下面是底部代码生成的屏幕截图。有什么建议吗？

Screenshot of the issue

Profile.aspx代码:

<asp:Content ID="content" ContentPlaceHolderID="content" runat="server">
<div class="content">
    <div class="pane-left">
        <div class="profile-group">
            <div class="pic">
                <img src="img/profile-pic.png" width="100px" height="100px" alt="profile photo" />
            </div>
            <br />
            <div class="name">
                <h1>Cody Hunsberger</h1>
            </div>
            <br />
            <div class="bio">
                <h3>About Me</h3>
                <p>Ants are social insects of the family Formicidae. Like wasps and bees, ants are in the order Hymenoptera. There are about 22,000 species of ants. More than 12,500 have been classified. They have a thin waist and elbowed antennae. Ants form colonies that vary greatly in size. Some species have a few dozen predatory individuals living in small natural cavities. Some highly organised colonies may cover large territories and have millions of individuals. Ants are usually small, but can carry the weight of twenty ants. Worker ants carry food back to the colony so that other ants and the queen can eat. The following account is mainly about ants which live in large colonies.</p>
            </div>
        </div>

    </div>
    <div class="pane-right">
        <h3>Profile</h3>
        <p>&nbsp</p>
        <strong>College</strong>
        <p>Science and Technology</p>
        <strong>Major</strong>
        <p>Information Science and Technology</p>
        <strong>GPA</strong>
        <p>4.0</p>
        <strong>Enrollment Status</strong>
        <p>Full-Time</p>
        <strong>Credits Earned</strong>
        <p>120</p>
        <strong>Expected Graduation Date</strong>
        <p>Spring 2018</p>
        <strong>Email Address</strong>
        <p>tuf09651@temple.edu</p>
        <strong>Phone</strong>
        <p>(555) 555-5555</p>
        <p>&nbsp</p>
        <h3>Application History</h3>
        <table>
            <tr>
                <th>Administrator</th>
                <th>Term</th>
                <th>Status</th>
                <th>View</th>
            </tr>
            <tr>
                <td>Rose McGinnis</td>
                <td>Spring 2018</td>
                <td><span class="label label-warning">Under Review</span></td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr>
                <td>Rose McGinnis</td>
                <td>Fall 2017</td>
                <td><span class="label label-success">Approved</span></td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr>
                <td>Rose McGinnis</td>
                <td>Spring 2017</td>
                <td><span class="label label-danger">Denied</span></td>
                <td><a href="#">Link</a></td>
            </tr>
        </table>
    </div>
</div>

相关 CSS:

    .pane-left, .pane-right {
    background: #FFFFFF;
    display: inline-block;
    height: 100%;
    width: 50%;
    padding: 20px;
}

.pane-left {
    float: left;
}

.profile-group {
    text-align: right;
    overflow: auto;
    padding-top: 125px;
}

.pane-left > pic > img {
    float: right;
    margin: 100px;
}

.pic, .name, .bio {
    height: auto;
    display: block;
}

.bio > h3 {
    color: black;
    float: right;
}

.name > h1 {
    color: black;
    float: right;
}

.pane-right {
    float:right;
}

.content {
    background: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 80%;
}

.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    text-align: center;
    background: #ffffff;
    width: 100%;

}

.footer > p {
    color: #b2101f;
}

ul.nav.navbar-nav > li > a:hover  {
    color: red;
}

ul.nav.navbar-nav > li > a {
    color: #b2101f;
}

.navbar-default {
    color: #FFFFFF;
}

.nav-tabs > li > a {
    color: #aa0000;
}

table {
    width: 100%;
    margin-bottom: 20px;
}

tr {
    width: 25%;
}

td, th {
    border: 1px solid black;
    padding: 1rem;
}

Answer 1

是这样的吗？ fiddle

我将以下代码添加到内容 div 以对齐 div 并删除了 display: inline-block; 和 float 标签，因为它们使事情变得困惑。

margin: 0 auto;  
display: flex;  
justify-content: center; 

---

.content {
   margin: 0 auto;
   display: flex;
   justify-content: center;
}
.pane-left, .pane-right {
    background: #FFFFFF;
    height: 100%;
    width: 50%;
    padding: 20px;
}

.profile-group {
    overflow: auto;
    padding-top: 125px;
}

.pane-left > pic > img {
    margin: 100px;
}

.pic, .name, .bio {
    height: auto;
    display: block;
}

.bio > h3 {
    color: black;
}

.name > h1 {
    color: black;
    float: right;
}

.content {
    background: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 80%;
}

.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    text-align: center;
    background: #ffffff;
    width: 100%;

}

.footer > p {
    color: #b2101f;
}

ul.nav.navbar-nav > li > a:hover  {
    color: red;
}

ul.nav.navbar-nav > li > a {
    color: #b2101f;
}

.navbar-default {
    color: #FFFFFF;
}

.nav-tabs > li > a {
    color: #aa0000;
}

table {
    width: 100%;
    margin-bottom: 20px;
}

tr {
    width: 25%;
}

td, th {
    border: 1px solid black;
    padding: 1rem;
}

<div class="content">
    <div class="pane-left">
        <div class="profile-group">
            <div class="pic">
                <img src="http://via.placeholder.com/100x100" width="100px" height="100px" alt="profile photo" />
            </div>
            <br />
            <div class="name">
                <h1>Cody Hunsberger</h1>
            </div>
            <br />
            <div class="bio">
                <h3>About Me</h3>
                <p>Ants are social insects of the family Formicidae. Like wasps and bees, ants are in the order Hymenoptera. There are about 22,000 species of ants. More than 12,500 have been classified. They have a thin waist and elbowed antennae. Ants form colonies that vary greatly in size. Some species have a few dozen predatory individuals living in small natural cavities. Some highly organised colonies may cover large territories and have millions of individuals. Ants are usually small, but can carry the weight of twenty ants. Worker ants carry food back to the colony so that other ants and the queen can eat. The following account is mainly about ants which live in large colonies.</p>
            </div>
        </div>

    </div>
    <div class="pane-right">
        <h3>Profile</h3>
        <p>&nbsp</p>
        <strong>College</strong>
        <p>Science and Technology</p>
        <strong>Major</strong>
        <p>Information Science and Technology</p>
        <strong>GPA</strong>
        <p>4.0</p>
        <strong>Enrollment Status</strong>
        <p>Full-Time</p>
        <strong>Credits Earned</strong>
        <p>120</p>
        <strong>Expected Graduation Date</strong>
        <p>Spring 2018</p>
        <strong>Email Address</strong>
        <p>tuf09651@temple.edu</p>
        <strong>Phone</strong>
        <p>(555) 555-5555</p>
        <p>&nbsp</p>
        <h3>Application History</h3>
        <table>
            <tr>
                <th>Administrator</th>
                <th>Term</th>
                <th>Status</th>
                <th>View</th>
            </tr>
            <tr>
                <td>Rose McGinnis</td>
                <td>Spring 2018</td>
                <td><span class="label label-warning">Under Review</span></td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr>
                <td>Rose McGinnis</td>
                <td>Fall 2017</td>
                <td><span class="label label-success">Approved</span></td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr>
                <td>Rose McGinnis</td>
                <td>Spring 2017</td>
                <td><span class="label label-danger">Denied</span></td>
                <td><a href="#">Link</a></td>
            </tr>
        </table>
    </div>
</div>