时间戳

首页 > 解决方案 > CSS中的可变“固定”宽度点？

html - CSS中的可变“固定”宽度点？

问题描述

<div class="container">
  <div class="content">
   Apple
  </div>
</div>

假设“内容”的宽度应始终为 0、25、50、75 或 100%，具体取决于其内容。如果单词“Apple”占据“容器”的 20% 宽度，则“内容”的大小应为 25%。如果单词“Lettuce”占据“容器”的 40% 宽度，则“内容”的大小应为 50%。我不知道“内容”里面会有什么样的内容，也不知道实际内容的宽度。但它应该始终捕捉到这些值。

这种行为是否可能仅使用 css？如果不是，那么实现这一目标的最简单解决方案是什么？

编辑：我的目标是在“容器”中放置任意数量的“内容”div。它们都应该有一个宽度，这是这些值之一。我也不知道内容 div 的数量。

标签： htmlcss

解决方案

需要考虑的是使用带有 CSS的弹性盒子。在这种情况下，使用

.container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

应该允许您动态更改宽度。您所要求的不是看起来非常敏感或实用的东西。您也可以使用width: auto，以便元素自行调整大小。

推荐阅读