Блог

Главная - Вопросы по программированию - Почему мой div исчезает при просмотре рабочего стола с помощью flex?

Почему мой div исчезает при просмотре рабочего стола с помощью flex?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Div и ссылка отлично работают в мобильном режиме. Однако, когда я расширяюсь до рабочего стола, дочерний элемент исчезает, оставляя оба тега h1 расположенными в одном и том же месте?. Что я делаю не так?

Макет flex отлично работал до того, как я добавил ссылку внутри контейнера, поэтому я не знаю, в чем проблема.

HTML: 

 @media only screen and (min-width : 992px) {
  .banner-container{
    display: flex;
  }
}

.main-banner{
  width: 100%;
  border-bottom: 10px solid #D9B784;
  background-color: #D9B784;
  margin: 1%;
  min-height: 350px;
  text-align: left;
  position: relative;
  transition: filter .3s ease-in-out;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 
  cursor: pointer;
  margin-bottom: 5%;
}

.main-banner:hover{
  -webkit-filter: grayscale(75%); 
  filter: grayscale(75%); 
}

.clothing-banner{
  background-image: url("../img/banner1.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.accessories-banner{
  background-image: url("../img/acc.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

h1{
  color: #333;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  position: absolute;
    width: 50%;
    bottom: 10px;
    left: 30px;
}  
 <div class="banner-container">
  <a href="https://www.redpostequestrian.co.uk/clothing/holland-cooper">
    <div class="clothing-container">
      <div class="main-banner clothing-banner">
        <h1>Clothing</h1>
      </div>
   <a>
  </div>
  <div class="accessories-container">
    <a href="https://www.redpostequestrian.co.uk/accessories/holland-cooper">
      <div class="main-banner accessories-banner">
        <h1>Accessories</h1>
      </div>
    </a>
  </div>
</div>

Ответ №1:

Основная проблема:
У <a> элемента привязки не было размера, поэтому он рухнул.
Это было связано с ошибками в вашей разметке. Вы забыли закрыть некоторые <div> — и <a> элементы.

Проблема с Flexbox:
Если вы хотите использовать flexbox , вам нужно установить размер для элементов. В этом случае я устанавливаю flex свойство для двух элементов: «Одежда» и «Аксессуары». Что-то вроде:

 flex: 100% 1 0; /* shorthand for: flex-basis, flex-grow, flex-shrink */

Рекомендации:
Вы можете прочитать здесь для получения дополнительной информации о свойствах flexbox: flexbox-css-guide

Вы можете написать свою разметку немного более эффективно (это зависит от ваших целей). Например, вам не нужно переносить <div> внутренний <a> тег. Вместо этого вы можете использовать <a> -element в качестве container и <div> полностью отказаться от него.

<a> -элементы не block являются элементами, поэтому вы можете либо настроить display: block , чтобы они покрывали все child-elements , либо использовать его как a child-element container , который использует либо flexbox или grid . В этом случае вам не нужно изменять свойство display для работы (как вы можете видеть в примере ниже).

Рабочий пример (с изменением разметки): 

 @media only screen and (min-width: 992px) {
  .banner-container {
    display: flex;
  }
}

.main-banner {
  width: 100%;
  border-bottom: 10px solid #D9B784;
  background-color: #D9B784;
  margin: 1%;
  min-height: 350px;
  text-align: left;
  position: relative;
  transition: filter .3s ease-in-out;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  cursor: pointer;
  margin-bottom: 5%;
}

.clothing, .accessories {
  flex: 100% 1 0;
}

.main-banner:hover {
  -webkit-filter: grayscale(75%);
  filter: grayscale(75%);
}

.clothing-banner {
  background-image: url("../img/banner1.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.accessories-banner {
  background-image: url("../img/acc.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

h1 {
  color: #333;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  position: absolute;
  width: 50%;
  bottom: 10px;
  left: 30px;
}  
 <div class="banner-container">
  <a href="https://www.redpostequestrian.co.uk/clothing/holland-cooper" class="clothing">
    <div class="main-banner clothing-banner">
      <h1>Clothing</h1>
    </div>
  </a>
</div>
<div class="accessories-container">
  <a href="https://www.redpostequestrian.co.uk/accessories/holland-cooper" class="accessories">
    <div class="main-banner accessories-banner">
      <h1>Accessories</h1>
    </div>
  </a>
</div>

РЕДАКТИРОВАТЬ: добавлен простой макет с двумя столбцами

 .container {
  display: flex;
}

.col {
  flex-basis: 50%;
  padding: 15px;
  border: 1px dashed black;
}  
 <div class="container">
  <div class="col">col-1</div>
  <div class="col">col-2</div>
</div>

Комментарии:

1. Как мне изменить его так, чтобы в представлении рабочего стола «одежда» и «аксессуары» разделялись на два столбца?

2. @JulienLittler Нет проблем. Если это ответило на ваш вопрос, пожалуйста, подумайте о том, чтобы отметить ответ как принятый. Я добавил простой пример того, как сделать простой макет из двух столбцов с помощью flexbox.