Question

我有以下内容：

<div id="container">
    <div id="childA">123</div>
    <div id="childB">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

<style>
    #childA, #childB {float:left}
</style>

我希望#childB留在childA的右侧，但问题是当内部有大量文字时，它会低于#childA - 我想简单地说一旦达到#container - #childA的宽度，就会增长。

我无法设置它的宽度，因为我不知道#childA中有多少文字。（#childA内部永远不会有太多文字，并且只能保留一行。）

感谢您的帮助 - 花了一些时间寻找，找不到任何有用的东西。

Answer 1

在max-width上设置max-width:#container - #childA; #childB以防止此情况发生。

编辑：

另一种方式：从float:left;移除childB并添加overflow:hidden，并将最大值添加到childA，如max-width:80%。

<强> DEMO

Answer 2

你的#childB正在#childA下包装，因为这两个元素太宽而不能在父容器中并排放置。

试试这个：

#container {
    margin: 0;
    padding: 0;
}

#childA, #childB {
    float: left;
    width: 50%;
    white-space: nowrap;
}

Answer 3

设置childA和childB的宽度，使用类

#childA, #childB {float: left;width:50%;}

Answer 4

你可以尝试

<div id="container">
   <div id="childA">123</div>
   <div id="childB">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

<style>
    #childA {
      float: left;
    }
</style>

所以你的#childA div会漂浮在#childB左边，并且它们不会将一个包裹在另一个之下，但缺点是#childB的文本将在#childA下面包裹一次它的高度超过#childA高度

保持浮动div彼此相邻

4 个答案: