無法獲得最大寬度

-3

我試圖讓6個盒子適合在一條線上，並根據屏幕分辨率進行更改。我不希望他們進入兩條線。我已經嘗試組合後，我可以代碼。我的理想寬度和高度是250px，其間的填充/邊距相等。我不知道還能做什麼？無法獲得最大寬度

#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

如果你有6盒250像素（加上額外的填充/邊框），你至少需要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; 
}

我改變你的風格和使用的Flexbox的達到預期的效果。

來源

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

這工作，非常感謝你！ –

我換出有利於簡單地使用'寬度的'calc'：16.6％;'和'箱上漿：填充盒;'。從視覺上看，你可以得到相同的效果，但支持更高的瀏覽器（83％vs 98％支持）。 – Dre

偉大的評論，感謝。 –

無法獲得最大寬度

回答

相關問題