gpt4 book ai didi

css - HTML:拆分父 div "fluidly"

转载 作者:行者123 更新时间:2023-11-28 19:09:58 25 4
gpt4 key购买 nike

我想知道如何让两个子 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>

我读到你不应该在没有给它设置宽度的情况下让它 float ,但似乎我想要的东西是不可能的。

谢谢

最佳答案

我想如果你不 float 第二个 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 中,这正是您想要的。红色列占据了蓝色列未占据的任何剩余空间。

关于css - HTML:拆分父 div "fluidly",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1015792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com