Question

我试图将6个盒子放在一条线上并随屏幕分辨率变化。我不希望他们进入2行。在我可以组合代码之后，我尝试过组合。我理想的宽度和高度是250px，它们之间的填充/边距相等。我不确定还能做什么...

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

不要将max width用于您想要达到的目的，请将样式表更改为以下内容：

＆＃13;

#boxes {
  text-align:center;
}
#boxes div { display:inline-block;
width:calc(16.66% - 10px);
}

#calculator {
	display:inline-block;
	height:100%;
	max-height:250px;
	border:solid black;
	border-width:medium;
	margin:auto;
}

#lore {
	display:inline-block;
	height:100%;
	max-height:250px;
	border:solid black;
	border-width:medium;
	margin:auto;
}

#artwork {
	display:inline-block;
	height:100%;
	max-height:250px;
	border:solid black;
	border-width:medium;
	margin:auto;
}

#news {
	display:inline-block;
	height:100%;
	max-height:250px;
	border:solid black;
	border-width:medium;
	margin:auto;
}

#tips {
	display:inline-block;
	height:100%;
	max-height:250px;
	border:solid black;
	border-width:medium;
	margin:auto;
}

#easter_eggs {
	display:inline-block;
	height:100%;
	max-height:250px;
	border:solid black;
	border-width:medium;
	margin:auto;
}

＆＃13;

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

＆＃13;

Answer 2

检查这是否是您想要的：

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来达到预期的效果。

无法获得最大宽度

2 个答案: