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

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”旁边，我的 objective 是将这两个文本片段放在角落的上方.

如有任何帮助，我们将不胜感激。

提前致谢并致以最诚挚的问候

达夫扎

Answer 1

我不知道您为什么对 table 使用浮点数，但是，您的问题的解决方案仍然很简单。只需将其添加到您的 css 即可。

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

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

还有，如果你想改变元素的高度，只要把top: ;的值改成你喜欢的就行了。

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

I want different text in the same line positioned to the left and right inside a table cell

html

css

paragraph

web