- Что лучше использовать для создания адаптивной шапки сайта WordPress -
float
илиflex
илиgrid
илиbootstrap
? - Можно ли для создания меню, состоящего из двух частей, одна из которых прижата слева (один пункт меню), а другая - справа, (все остальные пункты меню), использовать
float: left
(для части слева) иfloat: right
(для части справа)? (приведите пожалуйста html-код изначального положения: один пункт меню, промежуточная часть и остальные пункты меню - каркас меню с указанием технологии выравнивания). - (приведите пример кода, чтобы при уменьшении размера экрана часть меню справа переносилось на следующую строку, а также изначальное положение) .
-
Чисто мое мнение что лучше использовать flex. Grid пока поддержка не полная, а делать подобные задачи через float это мазахизм. Но это ИМХО– fortavey9 сен 2020 в 7:45
Добавить комментарий
|
1 ответ
- На этот вопрос здесь Вам отвечать не должны согласно правилам сайта, поскольку объективно лучшего варианта не может быть. Всё зависит от Ваших целей, а именно для каких версии браузеров Ваш сайт должен работать правильно. Попробуйте поэкспериментировать со всеми вариантами, потому что и
flex
, иgrid
, иfloat
имеют свои особенности, дальше поймете как Вам удобно. - Пример меню с использованием
float
, где соблюдаются ваши условия
* {
margin: 0;
padding: 0;
}
nav {
width: 100vw;
height: 90px;
background-color: darkblue;
}
ul {
list-style: none;
height: 50px;
margin: 20px 15px;
}
li {
padding: 10px 0;
float: left;
background-color: cornflowerblue;
width: 40px;
height: 40px;
text-align: center;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
}
.left {
width: 100px;
max-width: 100px;
float: left;
}
.right {
max-width: 50%;
float: right;
}
.right li {
margin-left: 10px;
}
<body>
<nav>
<ul class="left">
<li><a href="#">1</a></li>
</ul>
<ul class="right">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</nav>
</body>
- Я приведу вам тот же самый пример на
float
, только с медиа-запросом в CSS для экранов с шириной viewport'а меньше 768px, при достижении этого breakpoint'а в 768 пикселей я перенесу правую часть меню на следующую строку, а остальные стили оставлю так.
* {
margin: 0;
padding: 0;
}
nav {
width: 100vw;
height: 90px;
background-color: darkblue;
}
ul {
list-style: none;
height: 50px;
margin: 20px 15px;
}
li {
padding: 10px 0;
float: left;
background-color: cornflowerblue;
width: 40px;
height: 40px;
text-align: center;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
}
.left {
width: 100px;
max-width: 100px;
float: left;
}
.right {
max-width: 50%;
float: right;
}
.right li {
margin-left: 10px;
}
@media only screen and (max-width: 768px) {
nav {
padding-top: 10px;
height: 120px;
}
.left, .left li {
float: none;
margin: 0 auto;
}
.right {
width: 210px;
max-width: 100%;
float: none;
margin: 5px auto;
}
}
<body>
<nav>
<ul class="left">
<li><a href="#">1</a></li>
</ul>
<ul class="right">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</nav>
</body>
-
-
Вы можете попробовать использовать инструменты по типу Bootstrap Studio, если сталкиваетесь с трудностями, когда пишите сами код, а также воспользоваться готовыми шаблонами в WordPress, но от себя могу порекомендовать сверстать сайт вручную с помощью
flex
илиgrid
при позиционировании элементов, imho. 9 сен 2020 в 11:17