Автоматически упорядочивать элементы в таблице в зависимости от размера экрана - PullRequest
Новая
       11

Автоматически упорядочивать элементы в таблице в зависимости от размера экрана

0 голосов
/ 03 октября 2019

У меня есть таблица с квадратными кликабельными прямоугольниками в них. Мне нужно убедиться, что эти поля отображаются правильно на устройстве любого размера. Это означает, что мне нужно найти способ автоматически размещать содержимое таблицы в строках, чтобы все квадратные рамки помещались. Например, если вы находитесь на рабочем столе, расположение будет 4х4, если вы на мобильном устройстве, оно будет другим, чтобы обеспечить отображение всех ссылок. Не имеет значения расположение этих блоков, просто они все показаны.

Мой 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
}

1 Ответ

0 голосов
/ 03 октября 2019

Вы можете использовать этот код 

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>
...