Question

我正在尝试创建一个论坛（PHP不会显示）。每个帖子/回复由两个td表示（第一个td有一个图像 - 用户个人资料图片 - 第二个td有文本 - 用户写的 - 并且宽度为100％）。第一篇文章没有缩进。该帖子可以收到任何数量的回复。每个回复都可以收到任何数量的回复。我想不出动态缩进回复的方法。基本上，我需要一种方法来回复帖子有一个'缩进'，回复回复应该有两个'缩进'，回复回复应该有三个'缩进'等。

这就是我尝试过的。 CSS：

tr {
    border-left: 20px solid transparent; /* this would be the indent which each reply will receive */

HTML：

<table>
    <tr> <!-- this is the first reply to a post, so it should receive one indent -->
        <td class='first'><img src='proileImage.png' width='30px' /></td>
        <td class='second'>first reply</td>
    </tr>

    <tr> <!-- this is another reply to the post, so this should also get one indent -->
        <td class='first'><img src='proileImage.png' width='30px' /></td>
        <td class='second'>Second reply</td>

        <tr> <!--this is a reply to the second reply, so it should have two indents-->
            <td class='first'><img src='proileImage.png' width='30px' /></td>
            <td class='second'>Reply to second reply</td>
        </tr>

    </tr>
</table>

正如你所看到的那样，我希望由于对第二个回复的回复是tr内部的tr，它会收到两个20px（两个缩进）的左边界，但它只缩进了一次20px。我也意识到将tr放在tr的内部是无效的。

我想到的另一个解决方案（但不是一个正确的解决方案）是将每个回复放在li里面（因为li收到左边距，li里面的li也会缩进）然后我发现放置td的并且在ul和li中的tr是无效的。

我想不出动态地让每个帖子/回复都有一个缩进的方法，每个回复的回复都有两个缩进等。我不能改变每个帖子/回复的组成（必须由两个td组成）但我可以改变其他任何东西（CSS和帖子/回复周围的html）。任何人都可以认为，如果我可以动态缩进每个帖子/回复，取决于它是回复，回复答复等？

这是否属于codegolf（https://codegolf.stackexchange.com/）？

Answer 1

您可能不得不在div中使用div而不是表行和数据。 TR在定位方面难以格式化。除非你想成为旧学校并将表放在表格中的表格中？ Divs会更加繁琐，但你会得到你想要的结果。一种解决方案可能是使用类似的jQuery：

$(".replyDiv").foreach(function(){
    // change css to margin-left:20px
});

修改

检查http://jsfiddle.net/E2nfS/2/ 注意每个回复的Css如何只有margin-left：20px; 您可以将jquery应用于您在回复中的每个后续div。希望它可以帮助您在视觉上理解该做什么。

Answer 2

你不能在第一个关闭的td内有另一行。使用萤火虫或其他东西看到它只是与前两个一起产生另一行。你需要另一个td，然后再一个完整的表。尽管表格单元格会排成一行，但这对你来说将是一个痛苦的问题。也许它只是我，但我会建议使用另一个节点类型，如div或span或某些东西（甚至可能是一个列表），然后为css写出一个循环，作为带有回复计数循环的子元素或单个元素的内联css。

HTML / CSS - 创建论坛 - 动态缩进tr的任何方式？

2 个答案: