如果父元素的宽度小于500像素，则将子元素的宽度设置为自动吗？

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>

当父div的宽度低于1000px时，我希望将跨度的宽度设置为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

尝试一下：

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>

尝试调整编辑器的大小以查看结果。并删除内联样式。

Answer 2

您将需要在此处使用@media（max-width）。并记住默认情况下跨度宽度是自动的。因此，您还需要添加显示样式。

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 3

尝试媒体查询！

参考：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>