html - 自动调整 div 容器 CSS 的大小

Question

我有一个包含 2 列的网页，宽度为 50%，最小宽度为 500 像素。现在我想知道的是如何让它们调整大小，以便当第二列重新定位到第一列下方时，第一列调整大小以填充整个页面。我无法理解它，任何帮助将不胜感激。下面是基本代码：

html:

<div class="column">
    <div id="item-1">
        ##
    </div>
</div>
<div class="column">
    <div id="item-2">
        ##
    </div>
</div>

CSS：

.column{
    width:50%;
    min-width:500px;
    float:left;
}

Answer 1

CSS3 媒体查询

@media screen and (max-width: 1000px) {
  .column { width: 100%; float: none; }
}

调整它，你应该得到你想要的。

Answer 2

您可以使用媒体查询来做到这一点：

@media all and (max-width:1000px) {
  .column {width:100%;}
}