Question

我想知道如何让两个子div共享一个父div。

我希望左列包含数据库中的文本（一个单词）。这可能是1-10个字母长。由于我希望左列宽度完全符合单词，因此我没有给它设置宽度。

然后，我试图让正确的列填充剩余的空间。

有一种简单的方法吗？

我不确定如何设置正确的列css来实现这一目标。

<div id="parent_div" style="width: 100px; height: 100px;">
     <div style="background-color:blue; float:left;" id="left_column">
           blue
     </div>
     <div style="background-color:red; float: left;" id="right_column">
           red
     </div>
</div>

我读到你不应该在没有设定宽度的情况下浮动一些东西，但是看起来我想要的东西似乎是不可能的。

由于

Answer 1

如果你不漂浮第二个div，我想你会得到你想要的效果。

<body>
<div id="parent_div" style="width: 100px; height: 100px;">
<div id="left_column" style="background-color: blue; float: left;"> blue </div>
<div id="right_column" style="background-color: red;"> red </div>
</div>
</body>

在Firefox中，这完全符合您的要求。红色列占用蓝色列未占用的任何剩余空间。

Answer 2

嗯，首先，我建议你让右边的列浮动到右边 - 这应该把它放在左边的列旁边。但不确定左列的宽度。

HTML：将一个父div“流畅地”拆分

2 个答案: