我正在用 HTML 和 CSS 制作一個學校時間表模擬，我在一個特定的事情上遇到了麻煩，那就是在同一行中有 2 個不同的文本，一個位于左上角，另一個位于右上角。我試過使用浮動，但這會使文本向下移動到它下面的文本。
這是使用的代碼：https : //jsfiddle.net/zhu2a1y4/
這是 HTML 代碼：
<table class="separated">
<tr>
<td>
<div class='cell_header'>
<p class="group">s1</p>
<p class="classroom">N228</p>
<div>
<h3>S: ICT</h3>
<p>KOH</p>
</td>
</tr>
<tr>
<td>
<p>s1 N228</p>
<h3>L: ICT</h3>
<p>KOH</p>
</td>
</tr>
</table>
這是CSS：
*{
padding: 0px;
}
table, td {
border: solid black 1px;
border-collapse: collapse;
text-align: center;
column-width: 200px;
height: 100%;
}
.separated td, .separated{
border: 0px;
border-bottom: 1px solid black;
height: 100%;
}
.cell_header p {
display: inline;
position: relative;
overflow: auto;
margin-top: 0;
}
.classroom{
text-align: right;
float: right;
}
.group{
text-align: left;
float: left;}
正如您在示例中所看到的，文本“s1”和“N228”在“S:ICT”旁邊，我的目標是讓兩段文本都位于角落的更高位置。
任何幫助將非常感激。
提前致謝并致以最誠摯的問候
達夫扎
uj5u.com熱心網友回復：
我不知道您為什么要使用浮點數作為表格，但是，您的問題的解決方案仍然很簡單。只需將其添加到您的 css 中，您就可以開始使用了。
.classroom{
text-align: right;
float: right;
position: relative;
top: -15px;
}
.group{
text-align: left;
float: left;
position: relative;
top: -15px;
}
這是如何解決問題的？
--> 很簡單，您將這兩個元素的位置設定為相對位置，然后將頂部更改為-15px使文本比其原始位置高出 15px。
此外，如果您想更改元素的高度，只需將top: ;值更改為您喜歡的任何值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338356.html