当缩小到小于最小宽度时，如何使 4 个 div 动态占用 25/50/100%？答案

【问题标题】：how to make 4 divs take 25/50/100% dynamically when downsized less than their min-width?当缩小到小于最小宽度时，如何使 4 个 div 动态占用 25/50/100%？
【发布时间】：2017-04-04 02:15:30
【问题描述】：

假设您要显示 4 张相同正方形尺寸的图像，占宽度的 25%。缩小窗口时，将它们缩小到最小宽度：200px；

但是，如果做得更小，请将第三和第四张图片放在前两张图片的下方，并让它们各占 50% 的空间。这些可以再次缩小到 min-width:200px;

如果再次缩小超过 200 像素，让它显示 1 张图片，每张图片在最后一张下方占 100% 宽度？

现在我看到并玩了一些几乎是我想要的东西，但不能完全做到。有什么帮助吗？

这些是样式

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.column {
    width:25%;
    float:left;
    min-width:200px;
}

.column img {
    width:100%;
    height:auto;
}

这是html

<div class="container">
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
</div>

https://jsfiddle.net/au53h9jg/

【问题讨论】：

您需要使用媒体查询，我认为这会帮助您。 w3schools.com/css/css_rwd_mediaqueries.asp

标签： javascript html css

【解决方案1】：

使用媒体查询来实现，这里更新fiddle。

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.column {
    width:33.33333333%;
    float:left;
    min-width:200px;
}

.column img {
    width:100%;
    height:auto;
}
@media only screen and (max-width: 600px) {
  .column {
    width:50%;
    float:left;
    min-width:200px;
}
  
}
@media only screen and (max-width:400px) {
  .column {
    width:100%;
    float:left;
    min-width:200px;
}
  
}

<div class="container">
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
</div>

【讨论】：