html - 如何使 span 保持其位置免受侵占的 div

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)的左侧和右侧，然后当它们靠得太近时我设置一个宽度(强制换行)。