Question

所以我有一个评论部分的标题，我希望发件人的名字（在左边）和时间（在右边）在顶部对齐。

  <div style="float:left;">John Doe, Suzie Q</div><span class="pull-right"> Jan 30 at 10:29 PM</span>

在小型手机上，目前显示为：

John Doe, Suzie Q       
          Jan 30 at 10:29

我希望它看起来像

John Doe, Jan 30 at 10:29
 Suzie Q

它适用于除小屏幕以外的任何其他设备。使用大屏幕时，所需的效果是：

John Doe, Suzie Q    Jan 30 at 10:29

我如何才能更改我的CSS来实现这一目标？我只是暂时内联编辑它，并在设置css时移动到类。

编辑：我正在使用bootstrap，如果它改变了什么。

Answer 1

我一直在搞乱这个问题而且我认为你不能只用pull-left和pull-right来做这件事但是通过一些媒体查询和一些绝对定位我能够得到这个（demo）：

<div><span class="names">John Doe, Suzie Q</span><span class="time"> Jan 30 at 10:29 PM</span></div>

使用此CSS

div > span.names {
    position: absolute;
    left: 0;
    top: 0;
}
div > span.time {
    position: absolute;
    right: 0;
    top: 0;
}
@media (max-width: 240px) {
    .names {
        width: 100px;
    }
    .time {
        width: 100px;
    }
}

我正在做的是将每个元素的位置设置为父元素的左侧和右侧（在这种情况下为div），然后当它们靠得太近时我设置宽度（强制）换行。）

Answer 2

您可以将媒体查询用于移动设备。我们的想法是只在大屏幕上应用正确的浮动，因此：

@media only screen and (min-width: 1024px){
    html .pull-right{
        float: right;
    }
}

如何让跨度从一个侵略的div中占据一席之地

2 个答案: