HTML / CSS - Изменить макет на основе доступных элементов - PullRequest
Новая
       29

HTML / CSS - Изменить макет на основе доступных элементов

0 голосов
/ 15 мая 2018

Я бы хотел изменить макет своей веб-страницы в зависимости от доступных элементов.

В некоторых случаях элемент зеленый присутствует, а в других - нет.Я хотел бы изменить макет, как показано на рисунке ниже (без использования абсолютного позиционирования).

Возможно ли это?

Изображение: Изменение макета

Спасибо!

РЕДАКТИРОВАТЬ:

  • Я использовал только HTML и CSS
  • Я заставил его работать, используя абсолютную позицию на синем элементе, но тогда это не повлияло на ширину красного элемента.
  • Не имеет значения, находится ли зеленый элемент в DOM или отображается: нет

Ответы [ 3 ]

0 голосов
/ 15 мая 2018

Вы можете использовать: empty псевдо-селектор, чтобы выбрать элементы, которые не содержат ничего или содержат только HTML-комментарий, если зеленый элемент все еще существует и пуст

в css: 

div:empty {
   display: none;
}

Если div не существует, вы должны использовать JavaScript, чтобы проверить, существует ли он 

if(document.getElementById('id_of_element'))
{
    
}
0 голосов
/ 15 мая 2018 

.content {
  width: 500px;
  height: auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  color: #000
}

.red {
  position: relative;
  background: #f00;
  width: 100%;
  height: auto;
  top: 0;
  padding: 20px 0;
}

.green {
  float: left;
  background: green;
  width: 80%;
  height: auto;
  padding: 20px 0;
}

.blue {
  float: left;
  background: blue;
  color: white;
  width: 20%;
  height: auto;
  padding: 20px 0;
}
<div class="content">
  <div class="red">Red</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
</div>
0 голосов
/ 15 мая 2018

Это возможно с помощью flexbox. Вот пример:

Код: 

#container {
  display: flex;
  flex-wrap: wrap;
}

#red {
  height: 30px;
  background-color: red;
  width: 80%;
  flex: 1 0 80%;
  /* this set a base width of 80%, but can grow */
}

#green {
  height: 30px;
  background-color: green;
  width: 80%;
}

#blue {
  height: 30px;
  background-color: blue;
  width: 20%;
}
<div id="container">
  <div id="red"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>

Вы можете установить display: none на зеленый div, и у вас будет то, что вы хотите достичь

Вот это jsfiddle

...