Question

我想创建一个div max-width。但我也希望尽可能实现max-width。

可以说使用min-width可以实现这一点。问题是我还希望div在需要时自动缩小。

我该怎么做？

Answer 1

您可以使用Flexbox执行此操作，您只需设置flex-basis或flex: 0 1 300px，因此现在元素将增长到300px的最大值，但它也会缩小如果需要，您可以在调整窗口Fiddle

时调整此处

＆＃13;

.content {
  display: flex; 
}

.box {
  padding: 10px;
  margin: 1px;
  border: 1px solid black;
}

.box:last-child {
  flex-basis: 300px;
}

＆＃13;

<div class="content">
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

您可以将div的display值设置为inline-block或table。或者float。

div {
  display: inline-block;
  max-width: 500px;
}

div {
  display: table;
  max-width: 500px;
}

div {
  float: left;
  max-width: 500px;
}

其中任何一个都可以触发缩小以适应功能。

尽可能使用强制最大宽度划分

2 个答案: