时间戳

首页 > 解决方案 > 如何计算一个 div 的宽度并使其所有兄弟姐妹采用最大尺寸，以便使用 CSS 看起来一致？

css - 如何计算一个 div 的宽度并使其所有兄弟姐妹采用最大尺寸，以便使用 CSS 看起来一致？

问题描述

我想在里面制作几个包含不同字符串（）长度的div。我希望它们适合内容，但这会带来一个问题：各种 div 之一将包含一个更大的字符串，因此，它的宽度会比其他的更大，并且在应用边框时，它看起来很糟糕。

我一直在 jsbin 中练习一些 HTML 和 CSS，并做了以下代码：

html,body{
  padding:0!important;
  margin:0!important;
}

.padre{
  border:2px solid violet;
  width: -moz-fit-content;
  width: -o-fit-content;
  width:-webkit-fit-content;
  width: fit-content;
  
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>

<body>
  
  <div class="padre">
    <div class="hijo">
      <h4 id="gato">El gato.</h1>
    </div>
    <div class="hijo">
      <h4 id="gato">La Firefox.</h1>
    </div>
    <div class="hijo">
      <h4>El gato pulpo.</h1>
    </div>
    <div class="hijo">
      <h4>La turritopsis nutrícula.</h1>
    </div>
  </div>

    <div class="padre">
      <div class="hijo">
        <h4 id="gato">El perro.</h1>
      </div>
      <div class="hijo">
        <h4 id="gato">La vaca.</h1>
      </div>
      <div class="hijo">
        <h4>El lobo aguila.</h1>
      </div>
      <div class="hijo">
        <h4>La caravana h.</h1>
      </div>
    </div>

    <div class="padre">
      <div class="hijo">
        <h4 id="gato">El mono.</h1>
      </div>
      <div class="hijo">
        <h4 id="gato">La dragon.</h1>
      </div>
      <div class="hijo">
        <h4>La serpiente.</h1>
      </div>
      <div class="hijo">
        <h4>El caballo.</h1>
      </div>
    </div>
  
</body>

</html>

：

但正如您所看到的，它们看起来并不一致，因为我使用width:fit-content的是固定宽度而不是固定宽度。

有没有办法使用纯 CSS 计算最大 div 的宽度并将该宽度应用于其他人？

标签： css

解决方案

在css中尝试：

.hijo {
  width: 100%;
}

推荐阅读