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

Answer 2

您可以使用position: absolute;上的.statsdiv和position:relative;上的.linksdiv来实现您的目标。我想使用float对此来说太过分了。

更新了CSS（仅限修改过的课程）：

.linksdiv{
    font-size: 8pt;
    text-align: center;
    height: 10px;
    position: relative;  /*added*/
}
.statsdiv{
    font-size: 7pt;
    /* text-align: right;  not required */
    display: inline-block;
    height: 10px;
    position: absolute; /*added*/
    right: -0.5%;       /*added*/
}

<强> FIDDLE

Answer 3

考虑这个工作的CSS。这是Demo

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

Answer 4

将此添加到您的.statsdiv css

float:right;

这里是小提琴http://jsfiddle.net/cc68d/

编辑： - 尽管如此，正如您所指出的那样，它不会将Read More [..]对齐在中心。实际上问题在于设计部分。我不会详细介绍。您可以通过将style="padding-left:100px;"添加到您的ReadMore [..] <a>代码属性来更正此问题。

如此处所示http://jsfiddle.net/cc68d/1/

Answer 5

添加第三个div，宽度为你需要的宽度，它们之间没有内容 - 占位符div ...记得向右浮动，文本对齐和边距。

Answer 6

替换你的总css代码，你需要浮动课程.statsdiv

您修改的总代码为：

.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;
  float: right; /* Add this */
}

Answer 7

你可以让你的div脱离流动，使其位置绝对：

.statsdiv{
    font-size: 7pt;
    text-align: right;
    display: inline-block;
    height: 10px;
    position: absolute;
    align: right;
    padding: 0 15px;
    width: 96%;
    left: 0;
}

需要进行一些调整，以便在所有定义中使其正确...

2个div在同一条线上？

7 个答案:

Updated Demo