如何在我的网站上操纵此元素

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