Question

我正在设计一个工具提示，当用户将鼠标悬停在各种啤酒上时会出现。每个工具提示将有7个键值对，代表啤酒属性。这是其中一种啤酒的工具提示：

.tooltip {
  position: absolute;
  width: 300px;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
  grid-template-areas: "attributeName attributeValue";
}

.attributeName {
  font-size: 10px;
  grid-area: attributeName;
}

.attributeValue {
  font-size: 14px;
  grid-area: attributeValue;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="tooltip">
        <p>
          <span class="attributeName">Name: </span>
          <span class="attributeValue">Totally Radler</span>
        </p>
        <p>
          <span class="attributeName">Style: </span>
          <span class="attributeValue">Radler</span>
        </p>
        <p>
          <span class="attributeName">Brewery: </span>
          <span class="attributeValue">Hopworks Urban Brewery</span>
        </p>
        <p>
          <span class="attributeName">Location: </span>
          <span class="attributeValue">Portland, Oregon</span>
        </p>
        <p>
          <span class="attributeName">Ounces: </span>
          <span class="attributeValue">16</span>
        </p>
        <p>
          <span class="attributeName">ABV: </span>
          <span class="attributeValue">2.7%</span>
        </p>
        <p>
          <span class="attributeName">IBU: </span>
          <span class="attributeValue">21</span>
        </p>
  </div>
  
</body>
</html>

我希望工具提示使每个attributeName（名称，啤酒厂，位置等）彼此左对齐，并且我也希望使attributeValues彼此左对齐，并带有一个他们之间的差距很小。这是一个更好地说明这一点的模型：

https://imgur.com/a/kb7JNnA

我想使用CSS Grid来实现此目的，但是由于某些原因，代码未按预期运行。我不拘泥于HTML组织，因为我正在用JavaScript生成所有代码。我想知道span's内p's的嵌套是否引起了问题。

Answer 1

.tooltip不是span的父对象，p在此处应为grid;）

.tooltip {
  position: absolute;
  width: 300px;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  /* update to go down a level */
}

.tooltip p {
  display: grid;/* direct children will be displayed into the grid set */
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
  grid-template-areas: "attributeName attributeValue";
}
/* end update */
.attributeName {
  font-size: 10px;
  grid-area: attributeName;
}

.attributeValue {
  font-size: 14px;
  grid-area: attributeValue;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="tooltip">
    <p>
      <span class="attributeName">Name: </span>
      <span class="attributeValue">Totally Radler</span>
    </p>
    <p>
      <span class="attributeName">Style: </span>
      <span class="attributeValue">Radler</span>
    </p>
    <p>
      <span class="attributeName">Brewery: </span>
      <span class="attributeValue">Hopworks Urban Brewery</span>
    </p>
    <p>
      <span class="attributeName">Location: </span>
      <span class="attributeValue">Portland, Oregon</span>
    </p>
    <p>
      <span class="attributeName">Ounces: </span>
      <span class="attributeValue">16</span>
    </p>
    <p>
      <span class="attributeName">ABV: </span>
      <span class="attributeValue">2.7%</span>
    </p>
    <p>
      <span class="attributeName">IBU: </span>
      <span class="attributeValue">21</span>
    </p>
  </div>

</body>

</html>

Answer 2

坦率地说，这是一个table（或至少是CSS-Tables）...我认为没有必要使其更加复杂。

此外，它还可以支持IE8。

.tooltip {
  position: absolute;
  width: 300px;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  display: table;
}

p {
  display: table-row;
}

.attributeName {
  font-size: 10px;
  display: table-cell;
}

.attributeValue {
  font-size: 14px;
  display: table-cell;
}

<div class="tooltip">
  <p>
    <span class="attributeName">Name: </span>
    <span class="attributeValue">Totally Radler</span>
  </p>
  <p>
    <span class="attributeName">Style: </span>
    <span class="attributeValue">Radler</span>
  </p>
  <p>
    <span class="attributeName">Brewery: </span>
    <span class="attributeValue">Hopworks Urban Brewery</span>
  </p>
  <p>
    <span class="attributeName">Location: </span>
    <span class="attributeValue">Portland, Oregon</span>
  </p>
  <p>
    <span class="attributeName">Ounces: </span>
    <span class="attributeValue">16</span>
  </p>
  <p>
    <span class="attributeName">ABV: </span>
    <span class="attributeValue">2.7%</span>
  </p>
  <p>
    <span class="attributeName">IBU: </span>
    <span class="attributeValue">21</span>
  </p>
</div>

CSS网格两列键：值布局

2 个答案: