Блог

Главная - Вопросы по программированию - Возможно ли, чтобы элемент «проходил» через структурные правила?

Возможно ли, чтобы элемент «проходил» через структурные правила?

#html #css

#HTML #css

Вопрос:

Я начну с примера

 .Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  }

#AllStuffs {
  display:flex;
  flex-direction:row;
  } 
 <div id="AllStuffs">
  <div class="Item">I am static</div>
  <div id="DynamicTexts">
    <div class="Item">Lets pretend</div>
    <div class="Item">that we are dynamic</div>
  </div>
</div>

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

В то же время я хочу, чтобы этот элемент-разделитель был полностью невидимым для структуры документа и подчинялся правилам css, как если бы все элементы класса «item» были прямыми дочерними элементами элемента «AllStuffs», что в этом случае привело бы к 3 красным прямоугольникам подряд.

Есть ли способ принудительно использовать этот режим «прохождения» для элемента?

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

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

1. Вы могли бы взглянуть на developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

2. Почему вы не можете просто добавить отдельные классы к статическим и динамическим элементам?

3. @SalmanA Я могу, но дело не в этом.

Ответ №1:

Я не уверен, что понимаю ваше описание. Но в соответствии с решением в первом ответе я делаю аналогичное в flexbox:

 .Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  }

#AllStuffs {
  display:flex;
  flex-direction:row;
}
#DynamicTexts {
  display:flex;
  flex-direction:row;
} 
 <div id="AllStuffs">
  <div class="Item">I am static</div>
  <div id="DynamicTexts">
    <div class="Item">Lets pretend</div>
    <div class="Item">that we are dynamic</div>
  </div>
</div>

Ответ №2:

Вы хотите, чтобы динамическое поле не было в DOM. Например, вы хотите применить следующие правила css ко всем блокам, верно?

 AllStuffs>Item
{
    color: green;
}

В этом случае нет возможности обойти элемент DynamicText.
Чтобы решить эту проблему, вы должны использовать JS, потому что вы хотите изменить DOM веб-сайта.

Если вы хотите изменить только плавающее значение, см. Другие ответы.

Надеюсь, это то, о чем вы просите.

Ответ №3:

Здесь, используя числа с плавающей запятой:

 .Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  float: left;
  }
#AllStuffs, #DynamicTexts {
  list-style: none;
  margin: 0;
  padding: 0;
  }
#AllStuffs {
  overflow: auto; // clearfix the floats inside
  } 
 <ul id="AllStuffs">
  <li class="Item">I am static</div>
  <li>
    <ul id="DynamicTexts">
      <li class="Item">Lets pretend</li>
      <li class="Item">that we are dynamic</li>
    </ul>
  </li>
</ul>

Хотя это не требуется для решения вашей проблемы, я преобразовал контейнеры в списки, а элементы в элементы списка, чтобы улучшить семантику.

Метки: ,