如何定位2个div？ CSS

Question

我想实现这个：

但我现在有这个：

我希望“>”在 right.I 垂直居中，我目前正在使用 table 这样做，但我无法使文本在图标中央向右浮动。

我的Html（我用的是react）：

<div className="biy">
            <table>
              <tr className=""></tr>
              <tr className=""></tr>
              <td className="biy-td-content">
                <p className="biy-title">{"Bible in a year :"}</p>
                <a className="biy-a" href={Data.bible_in_a_year_url}>
                  <p className="biy-p">{Data.bible_in_a_year_references}</p>
                </a>
              </td>
              <td className="biy-td-icon">
                <div className="biy-span-center">
                  <div className="biy-span">
                    <GrFormNext></GrFormNext>
                  </div>
                </div>
              </td>
            </table>
          </div>

我的CSS:

.biy {
  background-color: var(--light);
  border-radius: 5px;
  margin-top: 16px;
  padding: 16px;
}

.biy-title {
  font-size: 1.1rem;
  margin: 0px;
  font-weight: 500;
}

.biy-p {
  font-size: 1.1rem;
  margin: 0px;
  color: var(--blue);
  font-weight: 550;
  margin-top: 8px;
}
.biy-a {
  text-decoration: none;
}

.biy-td-content {
  width: 96%;
}
.biy-td-icon {
  width: 4%;
}
.biy-span {
  margin: 0px;
  font-weight: 1000;
  font-size: 2rem;
  float: right;
}

.biy-span-center {
  position: fixed;
}

请帮帮我

Answer 1

你应该选择 CSS 网格而不是 table。使用 grid-area 时，您可以在没有任何额外标记的情况下定位 3 个元素。

马特

body {
  font-family: sans-serif;
  background: #F1F7FE;
}

.biy {
  display: grid;
  grid-template-columns: auto 24px;
  grid-template-areas:
    "label icon"
    "value icon";
  gap: 4px;
  width: 300px;
  padding: 16px;
  border-radius: 4px;
  background: #FFF;
}

.biy-label {
  grid-area: label;
}

.biy-link {
  grid-area: value;
  color: #56A4DC;
  text-decoration: none;
}

.biy-icon {
  grid-area: icon;
  align-self: center;
}

<div class="biy">
  <div class="biy-label">Bible in a year:</div>
  <a class="biy-link" href="">Exodus 34–35; Matthew 22:23–46</a>
  <svg class="biy-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor">
    <path d="M8 3L17 12L8 21" stroke-width="3" />
  </svg>
</div>

如何定位2个div？ CSS

How to position 2 divs? CSS

html

css

user-interface