SEO Сообщество: Спрашивайте и помогайте
Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.
Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.
psyleads
07.01.2020 17:30
765
Всем привет!
Как реализовать такой вывод ссылок в виде флагов стран?
https://pastenow.ru/00aa2cbe36...
списком умею, но это некрасиво на вид.
То есть как бы в виде таблицы по 4 флага в ряд.
Просто добавлять таблицу не вариант, так как валидаторы ругаются на ошибки
Поможем улучшить ваш сайт.
Возможно, ширина дивов где-то жестко прописана. Стоит тогда назначить странице свой id и отменить/назначить нужное.
Если уж жестоко для мобильных... ну, тогда нужно писать отделный блок css под парамеры разрешений, в media. можно и так, только нудно.
Знаток тут не нужен. Только базовые знания css.
После праздников, числа 10-го, в ЛС. Надо допить :) Чужой проект нетрезво... табу.
#LegendBox div {
float: left;
height: 30px;
width: 25%;
}
<html lang="ru">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 40px;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
}
.wrapper {
width: 600px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, 100px);
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
</body>
</html>
Это простой пример на Grid. Запишите в отдельный файл. попробуйте разобраться.