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

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