主页 / coding / 问题 / 79198517
Accepted
gregsdennis
Asked: 2024-11-18 09:56:51 +0800 CST

垂直居中，但在内容扩展时保持上边距

  • 772

我有一个包含两列的弹性框。左侧内容通常比右侧内容高，我想将右侧内容渲染为居中。

但是，左侧的内容可以扩展，我想让右侧的内容在扩展时保持在原处，而不是保持居中。

到目前为止，我有第一部分，但是当左侧部分扩展时，右侧部分会下降以保持居中。

.host {
  width: 500px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: yellow;
}

.left-panel {
  width: 50%;
  margin: 5px;
  flex-direction: column;
  background: pink;
}

.summary {
  margin: 5px;
  background: green;
}

.expand-list {
  margin: 5px;
  background: skyblue
}

.right-panel {
  width: 50%;
  margin: 5px;
  display: flex;
  flex-direction: row;
  background: blue;
}

.image {
  margin: 5px;
  background: red;
}

button {
  margin: auto 5px;
  width: 100px;
}
<div class="host">
  <div class="left-panel">
<div class="summary">
  Here is a long paragraph of text that I need to display.
  It takes up most of the container, but there's an expander
  below that will make this text take up less because the
  expander will take up more when expanded.
</div>
<details class="expand-list">
  <summary>click me</summary>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</details>
  </div>
<div class="right-panel">
<div class="image">
  <p>
    Don't let this text fool you;
  </p>
  <p>
   it's actually an image.
  </p>
</div>
<button>
  Do it
</button>
  </div>
</div>

我无法明确设置右侧内容的上边距，因为左侧内容没有设置高度。

如何让左侧内容扩展时右侧内容保持不变？最好使用纯 CSS 解决方案。

css

1 个回答

  1. Best Answer

    为了实现这一点，我必须将 ul 扩展面板移到详细信息元素之后而不是其中，以便它可以参与包含网格。

    这里的想法是，右侧面板位于网格的前两行中央，而左侧面板在详细信息面板关闭时高 2 行，在详细信息面板打开时高 3 行。

    .host {
  width: 490px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  background: yellow;
  column-gap: 10px;
  &:has([open]) {
    grid-template-rows: auto auto auto;
  }
}

.left-panel {
  padding: 5px;
  flex-direction: column;
  background: pink;
  display: grid;
  grid-row-end: span 2;
  grid-template-rows: subgrid;
  &:has([open]) {
    grid-row-end: span 3;
  }
}

.summary {
  background: green;
}

.expand-list {
  margin-top: 5px;
  background: skyblue;
}
.expand-list[open] {
  padding-bottom: 5px;
}
.expand-list + ul {
  display: none;
}
.expand-list[open] + ul {
  margin: 0;
  padding-top: calc(1em - 5px);
  display: block;
  background: skyblue;
}

.right-panel {
  grid-row-end: span 2;
  align-self: center;
  display: flex;
  flex-direction: row;
  background: blue;
  padding: 5px;
}

.image {
  background: red;
}

button {
  margin: auto 5px;
  width: 100px;
}
        <div class="host">
      <div class="left-panel">
        <div class="summary">
          Here is a long paragraph of text that I need to display.
          It takes up most of the container, but there's an expander
          below that will make this text take up less because the
          expander will take up more when expanded.
        </div>
        <details class="expand-list">
          <summary>click me</summary>
        </details>
        <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
          <li>Five</li>
          <li>Six</li>
          <li>Seven</li>
        </ul>
      </div>
      <div class="right-panel">
        <div class="image">
          <p>
            Don't let this text fool you;
          </p>
          <p>
            it's actually an image.
          </p>
        </div>
        <button>
          Do it
        </button>
      </div>
    </div>

    • 4

相关问题