无法获得最大宽度

-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

伟大的评论，感谢。 –

无法获得最大宽度

回答

相关问题