我正在尝试使用最大宽度与内部可浮动元素的容器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>笔记。由于某些原因，该片段给出的结果与小提琴不同。
html, body#container 变化：
- display: inline-block;
- width: -webkit-fit-content;
- width: fit-content;
/* Added just for demo purposes */
- padding: 3px;
我在#container中添加了填充，因此您可以看到#container实际上在那里。fit-content使父元素围绕其内容进行收缩包装，以至于如果不进行填充就无法看到它。
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;
}<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>Sample Text 3</p>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句