自动调整div容器CSS的大小

Question

我的网页有2列，宽度为50％，最小宽度为500px。现在我想知道的是如何让它们调整大小，以便当第二列重新定位到第一列之下时，第一列调整大小以填充整个页面。我无法理解它，任何帮助都会非常感激。以下是基本代码：

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%;}
}