html - 2个div在同一行？

Question

我试图在同一行上获得 2 个 div，但排列方式不同。这是我现在拥有的和我想要的照片:

[图片被海报删除]

这是我得到的代码:

<div class="newsdiv">
    <div class="picdiv" style="background-image: url('[...]');"></div>
    <div class="titlediv">
        <a href="#"><font size="4">', $row['title'], '</font></a>
    </div>
    <div class="textdiv">
        <font size="1">This is some dummy text</font>
    </div>
    <div class="linksdiv">
        <a href="#">[Read More...]</a>
        <div class="statsdiv">
            <a href="#">Views: 0 , Comments: 0</a>
        </div>
    </div>
</div>

和样式表:

.newsdiv{
    overflow: hidden;
    height: 126px;
    width: 100%;
    padding: 5px;
    border: 2px solid black;
    display: inline-block;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.picdiv{
    width: 220px;
    height: 110px;
    border: 1px solid #444;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 382px 120px;
    float: left;
}
.titlediv{
    height: 20px;
    text-align: center;
}
.textdiv{
    overflow: hidden;
    margin-top: 8px;
    height: 70px;
    text-align: center;
}
.linksdiv{
    font-size: 8pt;
    text-align: center;
    height: 10px;
}
.statsdiv{
    font-size: 7pt;
    text-align: right;
    display: inline-block;
    height: 10px;
}

关于如何做到这一点的任何想法？谢谢!

Answer 1

这里需要float

.statsdiv {
  font-size: 7pt;
  text-align: right;
  display: inline-block;
  height: 10px;
  float: right; /* Add this */
}

可能会有更清洁的解决方案，但您现在可以尝试一下

.linksdiv > a{
    margin-left:12%;
}

Updated Demo