作業に最大幅を得ることができません

-3

私は6つのボックスを1行に収め、画面の解像度を変えようとしています。私は彼らが2行に移動するのを望んでいません。私はできるコードの組み合わせの後に組み合わせを試した。私の理想的な幅と高さは250pxであり、それらの間の余白/マージンは等しい。私は作業に最大幅を得ることができません

Here's the jsfiddle.

#boxes {} #boxes div {} #calculator { 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    border: solid black; 
 
    border-width: medium; 
 
    margin: auto; 
 
} 
 
#lore { 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    border: solid black; 
 
    border-width: medium; 
 
    margin: auto; 
 
} 
 
#artwork { 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    border: solid black; 
 
    border-width: medium; 
 
    margin: auto; 
 
} 
 
#news { 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    border: solid black; 
 
    border-width: medium; 
 
    margin: auto; 
 
} 
 
#tips { 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    border: solid black; 
 
    border-width: medium; 
 
    margin: auto; 
 
} 
 
#easter_eggs { 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    width: 100%; 
 
    max-width: 250px; 
 
    border: solid black; 
 
    border-width: medium; 
 
    margin: auto; 
 
}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <div id="boxes"> 
 
    <div id="calculator"> 
 
     <p>TEST</p> 
 
    </div> 
 

 
    <div id="lore"> 
 
     <p>TEST</p> 
 
    </div> 
 

 
    <div id="artwork"> 
 
     <p>TEST</p> 
 
    </div> 
 

 
    <div id="news"> 
 
     <p>TEST</p> 
 
    </div> 
 

 
    <div id="tips"> 
 
     <p>TEST</p> 
 
    </div> 
 

 
    <div id="easter_eggs"> 
 
     <p>TEST</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-12-06 Colton Horvath

250px（余分なパディング/ボーダーを加えたもの）の6つのボックスがある場合、最低1500pxの幅が必要です。小さな画面で何をしたいですか？ – Dekel

複数の用途に 'class'を使用することをお勧めします：D – l2aelba

幅をパーセンテージ（すなわち、合計の1/6、境界線のビットを引いたものなど）に変更してください。 14％は合理的に近いと思われる。また、l2aelbaがクラスについて語ったこと – JRQ

チェックこれはあなたが望むものである場合：

https://jsfiddle.net/1vyoo6u2/1/

#boxes { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-around; 
} 
#boxes div{ 
    width:14vmax; 
    height:14vmax; 
    max-height: 250px; 
    display: inline-block; 
    max-height:250px; 
    border:solid black; 
    border-width:medium; 
    margin: 0; 
    padding: 0; 
}

は私が所望の効果を達成するために、あなたのスタイルや使用フレキシボックスを変更しました。

出典

2016-12-06 14:21:47

いけないあなたが達成したいものを、次のようにあなたのスタイルシートを変更するための最大幅を使用して...他に何を行うにはわからない：

#boxes { 
 
    text-align:center; 
 
} 
 
#boxes div { display:inline-block; 
 
width:calc(16.66% - 10px); 
 
} 
 

 
#calculator { 
 
\t display:inline-block; 
 
\t height:100%; 
 
\t max-height:250px; 
 
\t border:solid black; 
 
\t border-width:medium; 
 
\t margin:auto; 
 
} 
 

 
#lore { 
 
\t display:inline-block; 
 
\t height:100%; 
 
\t max-height:250px; 
 
\t border:solid black; 
 
\t border-width:medium; 
 
\t margin:auto; 
 
} 
 

 
#artwork { 
 
\t display:inline-block; 
 
\t height:100%; 
 
\t max-height:250px; 
 
\t border:solid black; 
 
\t border-width:medium; 
 
\t margin:auto; 
 
} 
 

 
#news { 
 
\t display:inline-block; 
 
\t height:100%; 
 
\t max-height:250px; 
 
\t border:solid black; 
 
\t border-width:medium; 
 
\t margin:auto; 
 
} 
 

 
#tips { 
 
\t display:inline-block; 
 
\t height:100%; 
 
\t max-height:250px; 
 
\t border:solid black; 
 
\t border-width:medium; 
 
\t margin:auto; 
 
} 
 

 
#easter_eggs { 
 
\t display:inline-block; 
 
\t height:100%; 
 
\t max-height:250px; 
 
\t border:solid black; 
 
\t border-width:medium; 
 
\t margin:auto; 
 
}

<div id="boxes"> 
 
    <div id="calculator"> 
 
    <p>TEST</p> 
 
    </div> 
 

 
    <div id="lore"> 
 
    <p>TEST</p> 
 
    </div> 
 

 
    <div id="artwork"> 
 
    <p>TEST</p> 
 
    </div> 
 

 
    <div id="news"> 
 
    <p>TEST</p> 
 
    </div> 
 

 
    <div id="tips"> 
 
    <p>TEST</p> 
 
    </div> 
 

 
    <div id="easter_eggs"> 
 
    <p>TEST</p> 
 
    </div> 
 
</div>

出典

2016-12-06 14:18:08

これはうまくいきました、ありがとう！ –

私は単純に 'width：16.6％;'と 'box-sizing：padding-box;'を使う代わりに 'calc'をスワップします。視覚的にも同じ効果が得られますが、ブラウザのサポートがより高い（83％対98％のサポート）。 – Dre

素晴らしいコメント、ありがとう。 –

作業に最大幅を得ることができません

答えて

関連する問題