html элемент не выталкивается при запросе мультимедиа

ProgramBox

html элемент не выталкивается при запросе мультимедиа

Post author:admin
Запись опубликована:21 мая, 2023
Post category:Вопросы по программированию

#html #css #positioning

#HTML #css #позиционирование

Вопрос:

Я уверен, что на этот вопрос уже был дан ответ раньше, но в большинстве вопросов говорится, что виновато «абсолютное» позиционирование. Я попытался настроить позиционирование и не могу понять, почему элемент P не перемещается вниз.

В моем реальном проекте это закомментированная «область баннера», которую нужно переместить вниз при запросе мультимедиа, но фоновая область закрывает мое меню навигации.

http://codepen.io/fastpenguin91/pen/BLrZBA?editors=1100

 .clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

 <header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Ответ №1:

Вы убрали значение float для навигации, но не для логотипа, который находится на том же уровне вложенности. Добавьте clear: both; к стилю .test.

 .clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  clear: both;
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

 <header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Ответ №2:

Это довольно просто. Добавьте float и width к родительскому:

 .test {
    height: 50px;
    background: pink;
    float: left;
    width: 100%;
}

Float и width делают элемент связанным с другими элементами, и поэтому он перемещается под баннер.

1. Зачем это необходимо? Div — это блочный элемент. разве он не должен по умолчанию иметь ширину 100% и, следовательно, его не нужно перемещать? Даже без этого элементы элемента списка составляют 100% и должны занимать всю ширину, таким образом выталкивая элементы вниз.

2. На самом деле нет, div по умолчанию не равен 100%. Теоретически все браузеры отображают divs в виде блоков, но если вы начинаете изменять элементы вокруг него, то его необходимо соответствующим образом настроить. Теперь, с другой стороны, элемент с .nav-container классом имеет фиксированную высоту, так что вы можете просто не выталкивать его. Насколько я понимаю, вы хотели, чтобы розовый блок располагался ниже, так что это решение, о котором я могу подумать, и, конечно, это также подход, подтвержденный W3C. Приветствия 😉

Ответ №3:

Вы должны удалить значения с плавающей точкой. Как правило, их следует полностью избегать и, конечно же, не использовать для верстки. В вашем случае вы хотите, чтобы меню было на уровне блоков, поэтому просто удалите значение float:

 .primary-nav {
   width: 100%;
   padding: 0%; /* <- looked weird with left padding */
   height: auto;
   float:none; /* <- don't use floats for layout */
}

Показать фрагмент кода

 .clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: none;/*left*/;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding: 0%;
    height: auto;
    float:none;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

 <header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Expand snippet

1. Спасибо Moob. К сожалению, мне действительно нужно, чтобы навигация была справа, а логотип слева. Я конвертирую PSD-файл в адаптивный HTML-документ, и в PSD справа есть навигация.

2. @JohnCurry понял. Однако вам все равно следует избегать плавающих значений для макета. Вместо этого рассмотрите решения display:flex или inline-block или table-cell . Довольно тривиально иметь гибкую компоновку влево / вправо без использования поплавков. Это также избавляет вас от такого рода головной боли. 😉

3. Я начинаю понимать, что вы имеете в виду, поскольку я продвинулся дальше в проект. плавающие значения — это единственное, что доставляло мне проблемы.