gpt4 book ai didi

css - 无法处理 Float :left property

转载 作者:太空宇宙 更新时间:2023-11-04 05:16:57 25 4
gpt4 key购买 nike

<!doctype html>
<html>
<body>
<table style="float:left;margin-left:20px;width:120px">
<tr><td style="background-color:#EBEBF5;">Profile Info >> </td></tr>
<tr><td>Entertainment</td></tr>
<tr><td>Sports & Fun</td></tr>
<tr><td>Add More </td></tr>
</table>
<table style="width:200px">
<tr><td>info</td><td>Education</td><td>Work</td></tr>
</table>
</body>
</html>

浏览器窗口最大化时的样子

 Profile Info >>   info Education   Work
Entertainment
Sports & Fun
Add More

然后我把我的浏览器窗口最小化,越来越小到顶峰,现在是这个样子

     Profile Info >>
Entertainment
Sports & Fun
Add More
info Education Work

信息、教育和工作都回到底部添加更多为什么?为什么当我使用 float:left 时 width 属性不起作用?当我使用 float:left 属性时如何处理?

最佳答案

发生这种情况是因为您 float 了整个表格,并且您的“添加更多”行是主表格的一部分。如果没有足够的空间容纳它们,第二张 table 将在下面显示,如您所见。如果您不希望它换行,那么您需要将所有内容都换行到一个设置了 min-widthdiv 中。

<div style="min-width: 400px;">
<!--INSERT YOUR TABLES HERE -->
</div>

关于css - 无法处理 Float :left property,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7718666/

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