1

我在这个小提琴中演示的浮点数遇到了一个小问题。

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

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

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

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

4

2 回答 2

2

您可能想尝试使用 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 */
}

Explanation: The table structure will keep the elements in one line with width 50%; The inner elements (divs in this case) will be inline-blocks so that they can be aligned left or right. Now when one of the inner divs exceeds the max width of 50% it will just make the other 'cell' side smaller

于 2012-10-17T15:59:00.550 回答
1

将标签 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>

​</p>

于 2012-10-17T15:52:07.357 回答