Вопрос знатокам css

psyleads psyleads   07.01.2020 17:30   318  

Всем привет!

Как реализовать такой вывод ссылок в виде флагов стран?

https://pastenow.ru/00aa2cbe36...

списком умею, но это некрасиво на вид.

То есть как бы в виде таблицы по 4 флага в ряд. 

Просто добавлять таблицу не вариант, так как валидаторы ругаются на ошибки


Ответы на вопрос (12) Написать ответ
sansan sansan   07.01.2020 19:04
Хм... не понял проблемы. Выводим div, с float: left.
Возможно, ширина дивов где-то жестко прописана. Стоит тогда назначить странице свой id и отменить/назначить нужное.

Если уж жестоко для мобильных... ну, тогда нужно писать отделный блок css под парамеры разрешений, в media. можно и так, только нудно.

Знаток тут не нужен. Только базовые знания css.

После праздников, числа 10-го, в ЛС. Надо допить :) Чужой проект нетрезво... табу.
0
khrapko khrapko   07.01.2020 21:11
Здравствуйте! Посмотрели бы как это сделано на том сайте, который вы показываете в примере и вопрос был бы решен.

#LegendBox div {
float: left;
height: 30px;
width: 25%;
}
0
psyleads psyleads   07.01.2020 21:12
и куда этот код применить?
0
khrapko khrapko   07.01.2020 21:19
А как вы делаете списком? Покажите ваш кусок кода)
0
psyleads psyleads   07.01.2020 21:22
cюда код не прикрепляется
0
psyleads psyleads   07.01.2020 21:22
Вот скрин кода https://pastenow.ru/0f698af240...
0
khrapko khrapko   07.01.2020 21:24
В личку мне скиньте)
0
khrapko khrapko   07.01.2020 21:28
Замените на тут ваш флаг а это вставьте в ваш css файл: .LegendBox  { float: left; height: 30px; width: 25%; }
0
psyleads psyleads   07.01.2020 21:30
В личку код пришлите пожалуйста
0
Juiseed Juiseed   07.01.2020 23:35
вёрстка через float - вчерашний день. Используйте display: grid
0
sansan sansan   08.01.2020 10:19
не выносите мозг челу :) Вчерашний, позавчерашний... Вы проект-то смотрели? Какой там grid... Чел не знает, где у него css лежит. А сказать про ftp даже страшно :)
0
v3663 v3663   08.01.2020 01:52
<!DOCTYPE html>
<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. Запишите в отдельный файл. попробуйте разобраться.
0

Войдите, чтобы написать ответ
Вход Регистрация

Фриланс нового поколения. Всё за 500 рублей!