Question

我目前正在进行论坛设置，用户可以在其中查看，发布和回复主题。我在这里发布的是“回复主题位”。最高职位是“主题”，“回复”位在底部。在中间我已经“发布了答案”给主题。

我遇到的问题是“p”标签不会将自己定位在发布他/她回复的用户的右侧，就像底部的回复字段一样。

我尝试将回复位复制/粘贴到彼此之上，并且它们很好地对齐，但是一旦我将textarea标记更改为p标记，它就无法正常工作。

注意：帖子稍后将使用PHP转换为实际帖子，这仅用于测试

由于

以下是代码：

HTML

<div class=forumListWrap>
    <div class="col-1-forum">
        <h2>TITLE</h2><!--TITLE-->
        <button type="button" class="forumBtn">Add a Reply</button>

        <div class="topic">
            <h6>Topic</h6>
            <div class="reply-wrap">
                <div class="col-reply">
                    <div class="profilePicForum">
                        <img src="#">
                    </div>
                    <div class="profileInfoForum">
                        <h2>Username</h2>
                        <h3>Posts: 0</h3>
                        <h3><a href="profile.html">View Profile</a></h3>
                    </div>
                </div>
                <div class="col-3-reply">  
                    <div class="postedAnswer">
                        <p>LOREM</p> 
                    </div>      
                </div>
            </div>
        </div>

        <div class="reply">
            <div class="reply-wrap">
                <div class="col-reply">
                    <div class="profilePicForum">
                        <img src="#">
                    </div>
                    <div class="profileInfoForum">
                        <h2>Username</h2>
                        <h3>Posts: 0</h3>
                        <h3><a href="profile.html">View Profile</a></h3>
                    </div>
                </div>
                <div class="col-3-reply">  
                    <div class="postedAnswer">
                        <p>LOREM LOREM</p> 
                    </div>      
                </div>
            </div>
        </div>    

    <div id="horiLine"></div>

        <div class="col-2-reply">
            <h2>Reply to thread</h2>
            <div class="profilePicForum">
                <img src="#">
            </div>
            <div class="profileInfoForum">
                <h2>Username</h2>
                <h3>Posts: 0</h3>
            </div>
        </div>

        <div class="col-3-reply">  
            <div class="answerField">
                <textarea></textarea>
            </div>
            <input id="replySubmit" type="submit" value="Submit">        
        </div>
    </div> 
</div>

Please see code.

Answer 1

请参阅updated jsFiddle了解可能的变体。

我所做的解释：

我使用用户名（col-3-reply）将列的宽度设置为20％并使其向左浮动
我将回复内容的宽度设置为80％
我在下面添加了一个antifloat div。这是因为浮动元素的处理方式不同，通过添加它，您可以将它们保留在带有回复灰色边框的框内。

以下是antifloat CSS规则。有关所有详细信息，请参阅jsFiddle：

.antifloat {
    height: 0;
    width: 0;
    clear: both;
}

作为一般提示：查看新的CSS 3 flexbox（display：flex;）它在所有现代浏览器中都有很好的支持，并且更容易理解，编写和阅读。

我正在尝试在论坛设置中隐藏<p>标签

1 个答案: