0
我仍然得到CSS/HTML標記的掛起。在開展類模型項目以模擬網站用戶界面時，我正在使用個人資料頁面，但無法使生物文本無法包裝並圍繞其他內容。我只是希望配置文件組的每個組件位於其他組件的上方。以下是底部代碼生成的屏幕截圖。有什麼建議？在水平行中分隔三個div的問題
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> </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>[email protected]</p>
<strong>Phone</strong>
<p>(555) 555-5555</p>
<p> </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;
}
通過使用div class>「row col-md-12」使div class>「col-md-12」結束使用col類的Bootstrap，並解決了問題 – hunsbct