时间戳

首页 > 解决方案 > html 元素：换行符后但不展开

html - html 元素：换行符后但不展开

问题描述

我正在寻找一个 html/css 解决方案来获得某些 html 元素的以下行为：

在以下示例中，有多次尝试获取此行为，但均未成功：

body {
  width: 200px;
}

#yellow {
  height: 50px;
  background-color: yellow;
  border: 2px solid black;
}

#red {
  height: 50px;
  background-color: red;
  border: 2px solid black;
  display: inline-block;
}

#blue {
  height: 50px;
  background-color: blue;
  border: 2px solid black;
  display: inline-block;
}

.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>

<div id="yellow">
  <div class="child"></div>
</div>
<div id="red">
  <div class="child"></div>
</div>
<div id="blue">
  <div class="child"></div>
</div>

</body>
</html>

黄色 div 扩展到所有线宽，超过其内容的 50 像素。红色的（带有显示内联块的 div）具有正确的大小，但不会强制下一个 div（蓝色的）出现在下一行。

标签： htmlcss

解决方案

你能用max-width: fit-content吗？在 IE 或 Edge 上不受支持。

body {
  width: 200px;
}

#yellow {
  height: 50px;
  background-color: yellow;
  border: 2px solid black;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

#red {
  height: 50px;
  background-color: red;
  border: 2px solid black;
  display: inline-block;
}

#blue {
  height: 50px;
  background-color: blue;
  border: 2px solid black;
  display: inline-block;
}

.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>

<div id="yellow">
  <div class="child"></div>
</div>
<div id="red">
  <div class="child"></div>
</div>
<div id="blue">
  <div class="child"></div>
</div>

</body>
</html>

推荐阅读