Если ширина родительского элемента меньше 500 пикселей, установите для дочерней ширины значение auto?

Question

У меня есть несколько диапазонов внутри div, ширина которых установлена ​​на 100%, каждый диапазон имеет стиль, чтобы придать ему ширину 500px.

Вот так:

<div>
<span style="width=500px">child span</span><span style="width=500px">child span</span><span style="width=500px">child span</span><span style="width=500px">child span</span>
</div>

Когда ширина родительского деления становится меньше 1000 пикселей, я бы хотел, чтобы промежутки теперь имели ширину 100%

<div>
<span style="width=parent.Width < 1000px ? auto : 500px">child span</span><span style="width=parent.Width < 1000px ? 100%: 500px">child span</span><span style="width=parent.Width < 1000px ? 100% : 500px">child span</span><span style="width=parent.Width < 1000px ? 100% : 500px">child span</span><span style="width=parent.Width < 1000px ? 100% : 500px">child span</span>
</div>

Answer 1

Вам необходимо использовать @media (max-width) здесь.И помните, что ширина пролета по умолчанию - auto.Таким образом, вам нужно добавить стиль отображения тоже.

span {
  display: inline-block;
  width: 500px;
}

@media(max-width:1000px) {
  span {
    display: inline;
    width: 100%;
  }
}

<div>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
</div>

Answer 2

Попробуйте медиа-запросы!

Ссылка: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

span {
  display: inline-block;
  width: 500px;
}

@media screen and (max-width:1000px) {
  span {
    display: block;
    width: 100%;
  }
}

<div>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
</div>

Answer 3

Попробуйте это:

div {
  width: 100%;
  outline: 1px solid red;/*remove this. it is only for visualisation*/
}

div span {
  max-width: 500px;
  width: 100%;
  display: inline-block;
}

<div>
  <span>child span</span><span>child span</span><span>child span</span><span>child span</span></div>

Попробуйте изменить размер редактора, чтобы увидеть результаты.И удалить встроенные стили.