javascript - 我试图在论坛设置中 float <p> 标签

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。这是因为 float 元素的处理方式不同，通过添加它，您可以将它们保留在带有灰色回复边框的框内。

这是反 float CSS 规则。有关所有详细信息，请参阅 jsFiddle:

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

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