2

我有以下内容：

<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里面永远不会有太多文本，应该只保留 1 行。）

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

4

4 回答 4

4

设置一个max-widthwith max-width:#container - #childA;on#childB来防止这种情况。

编辑：

另一种方式：从 like 中删除float:left;并添加childB并overflow:hidden添加一个 max-with 。childAmax-width:80%

演示

于 2012-06-18T09:10:56.943 回答
0

您的 #childB 包裹在 #childA 下，因为这两个元素太宽，无法并排放置在它们的父容器中。

试试这个：

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

#childA, #childB {
    float: left;
    width: 50%;
    white-space: nowrap;
}
于 2012-06-18T09:10:47.393 回答
0

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

#childA, #childB {float: left;width:50%;}
于 2012-06-18T09:20:26.347 回答
0

你可以试试

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

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

所以你的#childAdiv 会浮动到左边，#childB它们不会将一个包裹在另一个下面，但缺点是一旦它的高度超过height ，文本#childB将包裹在 #childA 下面#childA

于 2012-06-18T09:20:36.690 回答