Question

当我在内部使用带有浮动元素的max-width时，我试图让容器div宽度与内容相匹配。

这在Chrome中运行良好，但IE和Firefox似乎无法正常工作。我创造了一个小提琴来说明：http://jsfiddle.net/Onthrax/bb0hcLwh/

上面的小提琴在chrome中完美地工作，容器匹配内容的宽度，但FF en IE不是。

如何在所有浏览器中调整CSS以使容器与宽度匹配？

#container {
  max-width: 20%;
  background-color: grey;
  margin: auto;
  word-wrap: break-word;
  float: left;
}
#container p {
  background-color: green;
  display: block;
  overflow: hidden;
  float: left;
}

<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

请注意。由于某种原因，该片段提供的结果与小提琴不同。

Answer 1

我使用html, body

#container更改：

   - display: inline-block;

   - width: -webkit-fit-content;

   - width: fit-content;

   /* Added just for demo purposes */

   - padding: 3px;

我在#container中添加了填充，这样你就可以看到#container实际存在了。 fit-content会使父元素围绕它的内容进行收缩，以便在没有填充的情况下看到它。

＆＃13;

html,
body {
  box-sizing: border-box;
  font: 400 16px/1.5'Source Code Pro';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
#container {
  display: inline-block;
  background-color: #2495d5;
  margin: auto;
  word-wrap: break-word;
  float: left;
  width: -webkit-fit-content;
  width: fit-content;
  /* Added just to demonstrate #container is still there */
  padding: 3px;
}
#container p {
  background-color: green;
  display: block;
  overflow: hidden;
  /* Added because everything was reset initially */
  margin: 1em auto;
}

＆＃13;

<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

＆＃13;

Answer 2

我不相信word-wrap: break-word;与旧版本的Firefox和IE兼容。但是，您可以使用word-break:break-all;代替。

#container {
    max-width: 20%;
    background-color: grey;
    margin: auto;
    word-break: break-all;    
    float:left;
}

#container p{
    background-color: green;
    display:block;
    overflow:hidden;
    float:left;
}

Answer 3

我认为您可以通过将max-width属性从...%更改为...px来解决此问题。它也适用于所有浏览器：

<强> HTML：

<div id="container">
   <p>Sample Text 1</p>
   <p>Sample Text 2</p>
   <p>Sample Text 3</p>
</div>

<强> CSS：

#container {
    max-width: 200px;
    background-color: grey;
    margin: auto;    
    float:left;
}

#container p{
    background-color: green;
    display:block;
    float:left;
    clear:both;
    overflow: hidden;
    margin: 10%;
}

查看工作示例HERE

当跨浏览器使用最大宽度和可浮动元素时，如何使容器宽度适合内容？

3 个答案: