html - div コンテナ CSS の自動サイズ変更

Question

幅 50%、最小幅 500px の 2 列の Web ページがあります。今私が知りたいのは、2 番目の列が最初の列の下に再配置されると、最初の列のサイズが変更されてページ全体を埋めるようにサイズを変更する方法です。私はそれを理解することができず、どんな助けも大歓迎です。以下は基本的なコードです。

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

score 0 · Accepted Answer

CSS3 メディアクエリ

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

それを微調整すると、必要なものが得られるはずです。

score 0 · Accepted Answer

メディアクエリでそれを行うことができます:

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

2 に答える 2