确保 float:right 元素与顶部垂直对齐，即使在 float:left 元素旁边也是如此

Question

我在演示 in this fiddle 时遇到了一个浮动的小问题。

我有一个向左浮动的 DIV，其宽度是动态的（未知）。我还有一个在同一个块中向右浮动，宽度也是动态的。

问题在于，如果第一个块的宽度延伸到与右侧浮动块发生碰撞，右侧浮动块将（正确）向下下降以确保没有发生碰撞。但是，我希望它保持在顶部（垂直，即 - 不是 z-index）。

基本上，似乎文本优先考虑“取代”右侧的块。这应该是相反的方式，但是左侧的文本甚至在开始换行之前就用完了最上面一行的可用空间。

我想解决方案相当简单。只是我根本没有想到它，而且我所做的任何搜索都没有找到我想要的东西。

Answer 1

您可能想尝试使用 css 表格/只需创建两个元素并将其设为表格，然后将您的左右元素设为表格单元格：

#wrapper {
  display: table;
  width: 100%;
}
#leftside, #rightside {
  display: table-cell;
  width: 50%; /* Both sides will be rendered on one line */
  vertical-align: top;
}
/* Position elements within the cell */
#leftside { text-align: left; }
#rightside { text-align: right; }
#leftside > div, #rightside > div {
  display: inline-block;
  text-align: left; /* Reset text alignment */
}

说明：表格结构将元素保持在一行，宽度为 50%；内部元素（在这种情况下为 div）将是内联块，以便它们可以左对齐或右对齐。现在，当一个内部 div 超过 50% 的最大宽度时，它只会使另一个“单元格”侧更小

Answer 2

将标签 div 浮动到标题 div 内，这会将标题文本包裹在标签周围，而不管两者的宽度如何。

<div class="infoBox">
<div class="inner">
    <div class="entry">
        <div class="title">
        <div class="type">
            LABEL
        </div>
            If this text is longer, the LABEL will drop downwards.
            I would like to have the LABEL float right (as it does here) but also be at the top of the block. 
        </div>
    </div>
</div>

​