CSS float 定位和縮放問題 - xishuai－IT工程師數位筆記本

文章出處

今天調試一個看起來很簡單的前端問題，但卻花了太多的時間，示例代碼：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <div style="width:10%; float:left; height:200px;background-color:aqua"></div>
        <div style="background-color:antiquewhite;float:right; width:90%;">
            <table style="width:100%">
                <thead>
                    <tr>
                        <td style="width:10%; text-align: center;"><b>狀態</b></td>
                        <td style="width:50%; text-align: center;"><b>標題</b></td>
                        <td style="width:10%; text-align: center;"><b>瀏覽量</b></td>
                        <td style="width:20%; text-align: center;"><b>發布時間</b></td>
                        <td style="width:10%; text-align: center;">&nbsp;<b>操作</b></td>
                    </tr>
                </thead>
                <tbody>
                    <tr bgcolor="#ffffff">
                        <td align="center">
                            <span>已發布</span>
                        </td>
                        <td>
                            <a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田園里的蟋蟀</a>
                        </td>
                        <td style="text-align: center;">0</td>
                        <td style="text-align: center;">2016-03-17 15:26</td>
                        <td style="text-align: center;">修改 刪除</td>
                    </tr>
                    <tr bgcolor="#ffffff">
                        <td align="center">
                            <span>已發布</span>
                        </td>
                        <td>
                            <a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田園里的蟋蟀</a>
                        </td>
                        <td style="text-align: center;">0</td>
                        <td style="text-align: center;">2016-03-17 15:26</td>
                        <td style="text-align: center;">修改 刪除</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

效果：

上面是我們一般設計后臺使用的代碼和樣式，左邊是菜單區域，右邊是內容操作區域，但左邊菜單區域因為分辨率或窗口大小進行了縮放，也就是菜單變形了，現在要求左邊菜單固定寬度不拉伸，右邊內容操作區域可以進行縮放，所以，我們改了下面的代碼：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <div style="width:144px; float:left; height:200px;background-color:aqua"></div>
        <div style="background-color:antiquewhite;">
            <table style="width:100%">
                <thead>
                    <tr>
                        <td style="width:10%; text-align: center;"><b>狀態</b></td>
                        <td style="width:50%; text-align: center;"><b>標題</b></td>
                        <td style="width:10%; text-align: center;"><b>瀏覽量</b></td>
                        <td style="width:20%; text-align: center;"><b>發布時間</b></td>
                        <td style="width:10%; text-align: center;">&nbsp;<b>操作</b></td>
                    </tr>
                </thead>
                <tbody>
                    <tr bgcolor="#ffffff">
                        <td align="center">
                            <span>已發布</span>
                        </td>
                        <td>
                            <a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田園里的蟋蟀</a>
                        </td>
                        <td style="text-align: center;">0</td>
                        <td style="text-align: center;">2016-03-17 15:26</td>
                        <td style="text-align: center;">修改 刪除</td>
                    </tr>
                    <tr bgcolor="#ffffff">
                        <td align="center">
                            <span>已發布</span>
                        </td>
                        <td>
                            <a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田園里的蟋蟀</a>
                        </td>
                        <td style="text-align: center;">0</td>
                        <td style="text-align: center;">2016-03-17 15:26</td>
                        <td style="text-align: center;">修改 刪除</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

效果：

這個我花了很多時間進行調整，不是表格寬度超過內容區域，就是寬度不夠，某個界面下調整了，但伸縮下界面，寬度又亂了，后來無意間調整了一下樣式，就可以了，代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <div style="width:144px; float:left; height:200px;background-color:aqua"></div>
        <div style="background-color:antiquewhite; margin-left:144px">
            <table style="width:100%">
                <thead>
                    <tr>
                        <td style="width:10%; text-align: center;"><b>狀態</b></td>
                        <td style="width:50%; text-align: center;"><b>標題</b></td>
                        <td style="width:10%; text-align: center;"><b>瀏覽量</b></td>
                        <td style="width:20%; text-align: center;"><b>發布時間</b></td>
                        <td style="width:10%; text-align: center;">&nbsp;<b>操作</b></td>
                    </tr>
                </thead>
                <tbody>
                    <tr bgcolor="#ffffff">
                        <td align="center">
                            <span>已發布</span>
                        </td>
                        <td>
                            <a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田園里的蟋蟀</a>
                        </td>
                        <td style="text-align: center;">0</td>
                        <td style="text-align: center;">2016-03-17 15:26</td>
                        <td style="text-align: center;">修改 刪除</td>
                    </tr>
                    <tr bgcolor="#ffffff">
                        <td align="center">
                            <span>已發布</span>
                        </td>
                        <td>
                            <a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田園里的蟋蟀</a>
                        </td>
                        <td style="text-align: center;">0</td>
                        <td style="text-align: center;">2016-03-17 15:26</td>
                        <td style="text-align: center;">修改 刪除</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>