幅、最小幅、最大幅の組み合わせ

以下のことを達成したいと思います：ドキュメントの全幅をカバーする同じ幅の2つの列、または固定幅のいずれか小さい方のデザイン。特定の幅にリサイズされると、それらはお互いの下に移動し、画面の幅の最大100％を占めるようにする必要があります（正確には100％が良いでしょうが、必ずしも必要ではありません）。幅、最小幅、最大幅の組み合わせ

私は次のコードを思いついたが、max-widthが100％適用されない。

パーセントを幅で、最大幅をパーセントで組み合わせることはできますか？
divの別のレイヤーなしでこれは可能ですか？
これはまったく可能ですか？

#head { 
 
     background-color: #00FF00; 
 
    } 
 
    body { 
 
     text-align: center; 
 
    } 
 
    #container { 
 
     margin: 0 auto; 
 
     width: 100%; 
 
     max-width: 500px; 
 
     text-align: center; 
 
    } 
 
    #left { 
 
     background-color: #FF0000; 
 
     float: left; 
 
     width: 50%; 
 
     min-width: 150px; 
 
     max-width: 100%; 
 
    } 
 
    #right { 
 
     background-color: #0000FF; 
 
     float: left; 
 
     width: 50%; 
 
     min-width: 150px; 
 
     max-width: 100%; 
 
    }

<div id="head"> 
 
    foo 
 
</div> 
 
<div id="container"> 
 
    <div id="left"> 
 
    bar 
 
    </div> 
 
    <div id="right"> 
 
    baz 
 
    </div> 
 
</div>

出典

2016-03-23 snaut

あなたは自分のCSSで#containerタグの下に、あなたの最大幅を削除する必要があります。この[jsFiddle]（https://jsfiddle.net/Dneilsen22/fepopubr/1/）もチェックしてください。これは練習には素晴らしいツールです。 – Danielson

Javascriptは必要ありません。CSSの一部のメディアクエリ – Johannes

@Johannes flexとmin-widthはmediaqueriesをスペアすることができます;）http://codepen.io/anon/pen/JXNMgd –

私はあなたがメディアクエリが必要だと思います。異なるビューポートの幅を設定できます。

#head { 
 
    background-color:#00FF00; 
 
} 
 
body { 
 
    text-align:center; 
 
} 
 
#container{ 
 
    margin: 0 auto; 
 
    width:100%; 
 
    max-width:500px; 
 
    text-align:center; 
 
} 
 
#left { 
 
    background-color:#FF0000; 
 
    float: left; 
 
    width: 50%; 
 
    min-width: 150px; 
 
    max-width: 100%; 
 
} 
 
#right { 
 
    background-color:#0000FF; 
 
    float: left; 
 
    width: 50%; 
 
    min-width: 150px; 
 
    max-width: 100%; 
 
} 
 

 
@media (max-width: 500px) { 
 
    #left { width: 100%;} 
 
    #right { width: 100%;} 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <div id="head"> 
 
      foo 
 
     </div> 
 
     <div id="container"> 
 
      <div id="left"> 
 
       bar 
 
      </div> 
 
      <div id="right"> 
 
       baz 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2016-03-23 20:46:08 lovos25

あなたはフレックスと最小幅を使用することがあります。http://codepen.io/anon/pen/JXNMgd

/* added */ 
 
#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#left, 
 
#right { 
 
    flex: 1; 
 
} 
 

 

 
/* your css cleared a bit */ 
 
#head { 
 
    background-color: #00FF00; 
 
} 
 
body { 
 
    text-align: center; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    max-width: 500px; 
 
    text-align: center; 
 
} 
 
#left, 
 
#right { 
 
    background-color: #FF0000; 
 
    min-width: 150px; 
 
} 
 
#right { 
 
    background-color: #0000FF; 
 
}

<div id="head"> 
 
    foo 
 
</div> 
 
<div id="container"> 
 
    <div id="left"> 
 
    bar 
 
    </div> 
 
    <div id="right"> 
 
    baz 
 
    </div> 
 
</div>

出典

2016-03-23 20:45:30

幅、最小幅、最大幅の組み合わせ

答えて

関連する問題