Сделать div с другим divs отзывчивым - PullRequest
Новая
       15

Сделать div с другим divs отзывчивым

0 голосов
/ 27 апреля 2018

Я новичок в HTML и CSS и хочу создать адаптивный заголовок, который содержит:

  • изображение логотипа с полем слева в пикселях при полном разрешении
  • при полном разрешении картинка должна быть в полном размере
  • меню навигации с 6
  • и шириной 1500 при полном разрешении

Нет начальной загрузки. Что вы предлагаете для этого? То, что я сделал до сих пор, не отзывчиво, в натуральную величину (ширина: 1920px) меры хороши и выглядят именно так, как и должны, но когда я пытаюсь изменить размер браузера, он не находится в одной строке, даже если я объявляю этот div " внутренняя ", которая содержит их, является шириной: 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>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Вы хотите что-то вроде следующего для пули 1 

.small-logo {
    margin-left: 10%;
}
@media only screen and (max-width: 600px) {
    .small-logo {
        margin-left: 0;
    }
}

Bullet 2 Я думаю, должен сказать, логотип не Pogo. На основании предоставленного кода .small-logo - ваш единственный логотип, поэтому вы должны сделать что-то вроде этого. 

.small-logo{
    width: 100%
}

Что есть в меню навигации 6? Колонны? Кнопки? Единороги?

Установите внутренний класс или , предпочтительно, идентификатор наибольшего div контента для максимального значения, которое я обычно люблю, чтобы центрировать контент и дать некоторый боковой пробел, чтобы я поместил основы в комментарии. 

.inner{
    max-width: 1500px;
    width: 100%;
    /*width: 85%;
    margin: auto 0;*/
}

Вы пытаетесь разместить логотип-обертку и навигацию по горизонтали? 

display: inline-block;
0 голосов
/ 27 апреля 2018

Используйте медиа-запросы. 

Here goes my Desktop resolution css 

    @media only screen and (max-width: 600px) {

    /* Here goes my Mobile resolution css */

        body {
            background-color: lightblue;
        }
    }
...