如何在灯箱图片下添加按钮和段落而不被截断？

Question

您好，我仅使用 CSS 创建了一个灯箱图片，我想在图片下方添加 2 个按钮和一个描述段落（这是在您点击图片并在灯箱中查看之后）

我快要添加这个了，但问题是当浏览器不是那么高时，按钮和段落不会显示，也没有滚动和查看它们的选项。

如果有人能帮助我，我将不胜感激。

Lightbox CSS Only With Image & Paragraph

// COLORS

$yellow-color: #d9b311;
$light-blue: #0080A7;
$medium-color: #ccc;
$dark-blue: #00111e;

// All Buttons will share these styles
%btn-shared {
  display: inline-block;
  padding: 0.8rem 2rem;
  transition: all 0.5s;
  border: none;
  cursor: pointer;
}


.btn {
  &-main {
    @extend %btn-shared; // Brings styles from BTN Shared
    color: #333;
    background-color: $yellow-color;
  }

  &-light {
    @extend %btn-shared; // Brings styles from BTN Shared
    color: #333;
    background-color: $light-blue;
  }

  &-dark {
    @extend %btn-shared; // Brings styles from BTN Shared
    color: #f4f4f4;
    background-color: $dark-blue;
  }
}

.p2 {
  &:hover {
    opacity: 0.3;
    cursor: pointer;
  }
}


/** LIGHTBOX MARKUP **/

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 650px;
  max-height: 100%;
  margin-top: 2%;
}
.lightbox .image-button-container {
  position: relative;
  display: flex;
  justify-content: center;

  .buttons-container {
    position: absolute;
    bottom: 40px;
    display: flex;
    justify-content: center;

    .btn-dark {
      margin: 0 1rem;
      border: 3px solid white;
    }
  }
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}

        <!-- ================= Image & Lightbox ================== -->

        <!-- PHOTO BOOTH TEMPLATE KING -->

        <div class="single-content webdesign webdev grid-item">
          <a href="#img21">
            <img
              class="p2"
              src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/ruben123_Web-Design_01.jpg"
            />
          </a>
        </div>

        <!-- lightbox container hidden with CSS -->

        <a href="#_" class="lightbox" id="img21">
          <div class="image-button-container">
            <img
              src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/ruben123_Web-Design_01.jpg"
            />
            <!-- ======================== ****** Paragraph  Container ****** ======================== -->       
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia minus magnam, laborum quia molestiae laboriosam! Rerum adipisci architecto ex.</p>
            

            <!-- ======================== ****** Buttons Container ****** ======================== -->
            <div class="buttons-container">
              <!-- Button Download -->
              <form
                method="get"
                action="img/"
              >
                <button class="btn-dark" type="submit">Download PSD</button>
              </form>

              <!-- Visit Website -->
              <button
                class="btn-dark"
                onclick="window.location.href = 'https://photoboothtemplateking.com/';"
              >
                Visit Website
              </button>
            </div>
            <!-- ======================== ****** Buttons Container ****** ======================== -->
          </div>
        </a>

我正在为这个项目使用 SCSS。谢谢。

Answer 1

这里有很多关于定位和显示元素的事情，但您可以在下面看到一个在包含图像、文本和按钮的 div 上使用溢出的示例。

在您的 .image-button-container

上应用下一个 css

width: 517px;
margin: 0 auto;
display: block;
overflow: auto;
height: 100%;
position: relative;

在您的 .lightbox img 上应用下一个 css，同时从中删除 max-height: 100%; 和 margin-top: 2%;，以便它可以应用自动高度并删除不必要的上边距。

width: 100%;
display: block;

在您的 .lightbox p

上应用下一个 css

display: block;
position: relative;

并最终在 .buttons-container 上应用下一个 css，同时考虑删除 bottom: 40px 规则。

display: block;
position: relative;

如何在灯箱图片下添加按钮和段落而不被截断？

How do I add Button and Paragraph under lightbox image without it being cut off?

html

css

lightbox