css - 确保 float :right element is vertically aligned to the top, 即使在 float:left 元素旁边

Question

我在演示时遇到了一个关于 float 的小问题 in this fiddle .

我有一个向左浮动的 DIV，其宽度是动态的(未知)。我有另一个在同一个 block 中向右浮动，宽度也是动态的。

问题是，如果第一个 block 的宽度扩展到它会与右边的 float 碰撞，右边的 float 将(正确地)向下下降以确保没有发生碰撞。但是，我希望它保持在顶部(垂直方向，即 - 而不是 z-index)。

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

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

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)将是行内 block ，以便它们可以左对齐或右对齐。现在，当其中一个内部 div 超过 50% 的最大宽度时，它只会使另一个“单元格”边变小