Question

我仍然掌握着CSS / HTML标记。在处理用于模拟网站UI的类项目时，我正在处理个人资料页面，但无法将生物文本包装在其他内容之外。我只是希望配置文件组的每个组件都位于其他组件之上。下面是底部代码生成的屏幕截图。有什么建议吗？

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;和浮动标记，因为它们使事情变得混乱。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

float:right和.bio > h3

中的.name > h1包裹着什么

摆脱那些。

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

2 个答案: