Question

我有一张桌子，上面有可点击的方形框。我需要确保这些框在任何大小的设备上都能正确显示。这意味着我需要找到一种方法来自动将表格内容放入行中，以便所有方盒都适合。例如，如果您在桌面上的位置是4x4，那么如果您在移动设备上的位置则是不同的，以确保可以显示所有链接。这些框的排列并不重要，只要它们都已显示即可。

我的HTML

<h2>My Tools</h2>

<table class="my-tools">
<tr>
    <td><a href="http://x.com" target="_blank"><div style="background-color: #11237C"><img src="https://image.flaticon.com/icons/svg/561/561127.svg"><p>Webmail</p></div></a></td>
    <td><a href="http://x.com" target="_blank"><div style="background-color: #971d33"><img src="https://image.flaticon.com/icons/svg/126/126496.svg"><p>Portal</p></div></a></td>
    <td><a href="http://x.com" target="_blank"><div style="background-color: #867750"><img src="https://image.flaticon.com/icons/svg/1556/1556324.svg"><p>My HR</p></div></a></td>
</tr>

</table>

和CSS

.my-tools div {
    padding: 30px;
    height: 100px;
    width: 100px;
    text-align:center;
}

.my-tools img {
    filter: invert(100%) sepia(43%) saturate(0%) hue-rotate(30deg) brightness(113%) contrast(101%);
    width: 85px;
    height: 85px;
    position: relative;
    bottom: 20px
}

.my-tools p {
    color: #fff;
    font-size: large;
    position: relative;
    bottom: 20px
}

.my-tools div:hover {
    filter: brightness(85%) 
}

.my-tools a:hover {
    text-decoration:none!important
}

Answer 1

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        } 
        h2 {
            text-align: center;
        } 
        .my-tools {
            border: 1px solid #ddd;
            margin: 0 auto;
            padding: 0;
        }
        .my-tools tr {
            margin: 0;
            padding: 0;
            border: 0;
        }
        .my-tools td {
            border-right: 1px solid #ddd;
        }   
        .my-tools td:last-child {
            border-right: 0px;
        }     
        .my-tools div {
            padding: 30px;
            height: 100px;
            width: 100px;
            text-align: center;
            margin: 15px;
        }        
        .my-tools img {
            filter: invert(100%) sepia(43%) saturate(0%) hue-rotate(30deg) brightness(113%) contrast(101%);
            width: 85px;
            height: 85px;
            position: relative;
            bottom: 20px
        }        
        .my-tools p {
            color: #fff;
            font-size: large;
            position: relative;
            bottom: 20px
        }        
        .my-tools div:hover {
            filter: brightness(85%)
        }        
        .my-tools a:hover {
            text-decoration: none!important
        }

<h2>My Tools</h2>
    <table class="my-tools">
        <tr>
            <td>
                <a href="http://x.com" target="_blank">
                    <div style="background-color: #11237C"><img src="https://image.flaticon.com/icons/svg/561/561127.svg">
                        <p>Webmail</p>
                    </div>
                </a>
            </td>
            <td>
                <a href="http://x.com" target="_blank">
                    <div style="background-color: #971d33"><img src="https://image.flaticon.com/icons/svg/126/126496.svg">
                        <p>Portal</p>
                    </div>
                </a>
            </td>
            <td>
                <a href="http://x.com" target="_blank">
                    <div style="background-color: #867750"><img src="https://image.flaticon.com/icons/svg/1556/1556324.svg">
                        <p>My HR</p>
                    </div>
                </a>
            </td>
        </tr>
    </table>

根据屏幕大小自动排列表格中的项目

1 个答案: