Сделать div с другим div адаптивным
Я новичок в HTML и CSS и хочу создать отзывчивый заголовок, содержащий:
- изображение логотипа с левым полем в пикселях при полном разрешении
- Картинка pogo должна иметь полный размер при полном разрешении
- меню навигации с 6
- и шириной 1500 при полном разрешении
Нет Bootstrap. Что вы предлагаете для этого? То, что я сделал до сих пор, не реагирует на запросы, при полном размере (ширина: 1920 пикселей) все в порядке, и он выглядит именно так, как должен, но когда я пытаюсь изменить размер браузера, он находится не в одной строке, даже если я объявляю этот div " inner ", который содержит их, имеет ширину: 100%, и оба они также имеют ширину: 100%.
Код выглядит примерно так:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class = "inner">
<div class = "logo-wrapper">
<div class = "small-logo">
<img src = "https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class = "navigation">
<ul><li>......</li></ul>
</div>
</div>
Обычно я пишу макет для мобильных устройств до макета для рабочего стола, мне легче настроить макет рабочего стола. Кроме того, изображение, которое вы выбрали, довольно велико для навигационной панели, я бы не стал использовать что-либо с высотой более 50 пикселей. Что вы можете сделать, так это изменить размер логотипа и сохранить пропорции. Если это вас устраивает, я могу написать вам решение
Ответы 2
Используйте медиа-запросы.
Here goes my Desktop resolution css
@media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
Для пули 1 вам понадобится что-то вроде следующего
.small-logo {
margin-left: 10%;
}
@media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
В Bullet 2, я полагаю, должно быть написано Logo, а не Pogo. Исходя из предоставленного кода .small-logo - ваш единственный логотип, поэтому вы должны сделать что-то вроде этого.
.small-logo{
width: 100%
}
Что в меню навигации 6 из? Столбцы? Кнопки? Единороги?
Установите внутренний класс или предпочтительно идентификатор самого большого div содержимого на максимальное значение. Я обычно предпочитаю центрировать содержимое и оставлять свободное пространство сбоку, поэтому я помещаю основы в комментарии.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Вы пытаетесь выровнять логотип и навигацию по горизонтали?
display: inline-block;
используйте @media screen для стилизации при разной ширине экрана.