Question

<!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时，为什么width属性不起作用：left？当我使用float：left属性时如何处理？

Answer 1

这是因为你正在浮动整个表，而你的Add More行是主表的一部分。如果没有足够的空间让他们都适合，那么第二张桌子会在你看到的地方包裹下面。如果您不希望它换行，那么您需要将div中的所有内容都包含在其中min-width。

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

无法处理Float：left属性

1 个答案: