我如何在我的网站上管理这个元素

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作为容器。