如何将此范围与div的右边对齐？

151

我有以下HTML：

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

使用此CSS：

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

如果您检查此jsFiddle：http : //jsfiddle.net/8JwhZ/

您会看到名称和日期固定在一起。有没有一种方法可以使日期与右边对齐？我尝试float: right;了第二个，但它弄乱了样式，并将日期推到了封闭的div之外

html css

— 戴夫·戴夫
source

2

您可以修改HTML吗？

— Phrogz

3

如果要使某物相对于另一个对象漂浮，则漂浮物必须在非漂浮物之前。日期应在标题和浮动权利之前。

— Josh Kovach

246

如果可以修改HTML：http : //jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

— 佛罗兹
source

CSS已简化且适当整洁：应同时添加两者。小提琴还包含非常脆弱的解决方案：jsfiddle.net/8JwhZ/2090

— Risord

9

或者，如果您要内联（我愿意）

— 标记

51

使用浮点数有点混乱：

使用flexbox可以完成许多其他“琐碎”的布局技巧。

   div.container {
     display: flex;
     justify-content: space-between;
   }

在2017年，如果您不必支持旧版浏览器，我认为这是首选的解决方案（而不是浮点型）：https : //caniuse.com/#feat=flexbox

检查小提琴与flexbox相比，不同的float用法有何不同（“可能包含一些竞争性答案”）：https ://jsfiddle.net/b244s19k/25/ 。如果您仍然需要坚持使用浮动，我当然推荐第三版。

— 里索德
source

这是我选择使用的那个，请记住还要设置它float: left;并float: right;在包含要间隔元素的范围内。

— Ran Lottem '18

1

这个答案的核心信息是“浮游物被认为是有害的”，您永远都不要使用它们（确定有一些罕见的例外）。那么您能否阐明为什么认为这是个好主意呢？

— Risord

1

我认为float内部元素是必需的，因为我认为它是在小提琴示例中为它们定义的，但#testD未定义。我的错！

— Ran Lottem '18

25

浮动的替代解决方案是使用绝对定位：

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

另请参见小提琴。

— 菲利普
source

5

您可以执行此操作而无需修改html。 http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

— 凯雷尔
source

4

使用没有Flexbox的解决方案justify-content: space-between。

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

当我们flex:1在第一个上使用时，它将占据整个剩余空间并将第二个移到右侧。此解决方案的小提琴：https : //jsfiddle.net/2k1vryn7/

在https://jsfiddle.net/7wvx2uLp/3/上，您可以看到两种flexbox方法之间的区别：第一个方法为flexbox justify-content: space-between和。flex:1

— 水力17
source