Question

#fit和#wrap说明了我希望一个元素的两种不同行为，具体取决于具体情况。如果有空间，该元素应该像#fit一样工作，但如果没有足够的空间，则应该像#wrap一样工作。

<div id="print">
    Printable
</div>
<div id="fit">
    Looks good on same line
</div>
<div id="wrap">
    Looks good on new line
</div>

CSS

body{overflow:hidden;padding:1em;}
div
{
    /*display:inline-block;*/
    float:left;
    height:1in;
    margin:.5em;text-align:center;line-height:1in;
    white-space:nowrap;box-shadow:0 0 .5em gray;
}
#print
{
    width:5in;
    background-color:black; color:white;
}
#fit
{
    /* when on same line
       Size to min-width
       OR fill remaining space
       (like flexible box style).
       Either way is fine.
    */
    min-width:3in;
    background-color:gold;
}
#wrap
{
    /* when wrapped to next line */
    /* fill 100% OR to max width */
    width:100%;
    min-width:3in;
    max-width:5in;
    background-color:orange;
}

Answer 1

您正在寻找的是 Flexbox，但大多数支持Flexbox 的浏览器都不支持包装。那些是IE10，Chrome和Opera。

http://codepen.io/cimmanon/pen/lqrGB

<div class="container">
  <div id="print">
    Printable
  </div>
  <div id="either">
    Looks good on either line
  </div>
</div>

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}
.container div {
  height: 1in;
  margin: .5em;
  text-align: center;
  line-height: 1in;
  white-space: nowrap;
  box-shadow: 0 0 .5em gray;
}

#print {
  /*-webkit-flex: 1 5in;
  -ms-flex: 1 5in;
  flex: 1 5in;*/
  width: 5in;
  background-color: black;
  color: white;
}

#either {
  -webkit-flex: 1 3in;
  -ms-flex: 1 3in;
  flex: 1 3in;
  max-width: 5in;
  background-color: gold;
}

Answer 2

假设我已正确理解您的问题，我认为您可以通过inline-block实现您想要的目标。

您需要将内容放在另一个div中的段落中，如下所示：

<div class="wrap-or-fit">
  <p>This is where your content goes.</p>
</div>

然后只需在段落上设置min-width和max-width属性，以及display:inline-block。

.wrap-or-fit > p {
  max-width:5in;
  min-width:3in;
  display:inline-block;
  ...
}

如果内容适合小于3英寸宽的单行，则容器将扩展至至少3英寸。如果内容超过5英寸，则需要将其包裹在正好5英寸的容器内。

如果内容介于3到5英寸之间，则容器宽度与内容宽度匹配。我不确定这是不是你想要的，但这可能是你能做的最好的。

您可以看到一个展开的示例，其中显示了窄内容样本和宽内容样本，以及与this codepen中的原始示例更匹配的样式。

填充剩余的水平空间（或最大宽度）并包裹最小宽度

2 个答案: