我如何在我的網站上管理這個元素

Question

我目前的代碼是

<div class ="main">
<div id="post" class="post">
                <div class = "upvote_downvote">
                    <div id = "upvote" class = "upvote">
                        <div class="upvote_arrow_tip"></div>

                    </div>
                    <div class = "score">
                        <p>1</p>
                    </div>
                    <div class = "downvote">
                        <div class="downvote_arrow_tip"></div>

                    </div>
                </div>
                <div class = "content">
                    <a class = "name_and_date">
                        <spam class="name">
                            <img class = "pfp" width = "30" height = "30" src="" alt="pfp">
                            <h3 class="first_last_name">FIRST NAME LAST NAME</h3>
                            <p class = "username">@USERNAME</p>
                        </spam>
                        <i class="date_time">DATE &nbsp&nbsp&nbsp&nbsp TIME</i>
                    </a>
                    <p class = "contents">POST CONTENTS</p>
                </div>
            </div>
</div>

它是這樣出來的：

我想要發生的是upvote_downvote div在content div的左邊。 但是，當我將float: left應用於兩個div時，發生以下情況：

name_and_date容器是一個彈性框，這會導致問題嗎？ 而且，邊界正在應用於post div。

Answer 1

也許使用display: inline-block作為容器。