我希望同一行中的不同文本位于表格单元格内的左侧和右侧

Question

我正在用 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”旁边，我的目标是让这两个文本都位于角落的较高位置。

任何帮助将不胜感激。

在此先感谢您并致以最诚挚的问候

达夫扎

Answer 1

我不知道您为什么要在表格中使用浮点数，但您的问题的解决方案仍然很简单。只需将其添加到您的 CSS 中，您就可以开始了。

.classroom{
    text-align: right;
    float: right;
    position: relative;
    top: -15px;
}
.group{
    text-align: left;
    float: left;
    position: relative;
    top: -15px;
}

这是如何解决问题的？ --> 很简单，您将这两个元素的位置设置为相对，然后将顶部更改为-15px，使文本比其原始位置高出15px。

另外，如果您想更改元素的高度，只需将top: ; 值更改为您喜欢的任何值。