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

【问题标题】：If width of parent element is less than 500px set children width to auto?如果父元素的宽度小于 500 像素，将子元素的宽度设置为自动？
【发布时间】：2018-10-17 13:50:05
【问题描述】：

我在 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 的宽度低于 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>

【问题讨论】：

我只能想象如果你的父母 div.width == window.width 会起作用，因为这样你就可以使用媒体查询了。
@Zze 还有其他方法吗？使用像 flexbox 这样的东西？
尝试使用@media 查询
你能用parent div 大小准确解释跨度应该如何排列，按列排列还是按行排列
smashingmagazine.com/2016/07/…, elementqueries.com, github.com/marcj/css-element-queries

标签： css less

【解决方案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>

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：