使用HTML和CSS在影像旁邊定位文本框？-有解無憂

我目前正在使用 HTML 和 CSS 在定位影像旁邊創建一個簡單的文本框。我目前正在通過使用尺寸相同的藍色影像然后將我的文本放在它上面來做到這一點。

這是當前設定，它是影像，然后是帶有文本的藍色框影像：

使用 HTML 和 CSS 在影像旁邊定位文本框？

我的 HTML 和 CSS 目前看起來像這樣：

<html>
<style>

p {
  margin-right: 80px;
  margin-left: 80px;
  font-size: 1.3vw;
  font-family: Arial;
}

h4 {
  margin-right: 80px;
  margin-left: 80px;
  font-size: 1.4vw;
  font-family: Arial;
  font-weight: bold;
}

.bottom_container {
  position: relative;
  text-align: center;
  color: white;
}

.right-textbox {
  position: absolute;
  color: white;
  top: 0%;
  left: 50%;
  width: 40%;
}

.bottom__img {
  width: 40%;
}
</style>
    <div class="bottom_container">
        <img class="bottom__img" src="https://imgur.com/n8gXRcX.jpg" alt="PA State Capital Building" >
        <img class="bottom__img" src="https://imgur.com/xUIkixp.jpg" alt="" >
        <div class="right-textbox">
            <h4>The Pennsylvania State Capital</h4>
            <p>Text goes here</p>
        </div>
    </div>

</html>

我可以使用文本框的背景顏色并以某種方式對其進行縮放以適應主影像的相同高度和寬度，而不必將其與相同尺寸的單獨影像匹配？

uj5u.com熱心網友回復：

這是一個使用 CSS 網格的解決方案：

顯示代碼片段

img{
  max-width: 100%;
}
.bottom_container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}
.right-textbox{
  background: blue;
  color: white;
  text-align: center;
}

<div class="bottom_container">
  <img class="bottom__img" src="https://imgur.com/n8gXRcX.jpg" alt="PA State Capital Building">
  <div class="right-textbox">
    <h4>The Pennsylvania State Capital</h4>
    <p>Text goes here</p>
  </div>
</div>

或靈活的高度方法：

顯示代碼片段

img{
  max-width: 100%;
}
.bottom_container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}
.image-container{
  background-image: url("https://imgur.com/n8gXRcX.jpg");
  background-size: cover;
}
.right-textbox{
  background: blue;
  color: white;
  text-align: center;
}

<div class="bottom_container">
  <div class="image-container"></div>
  <div class="right-textbox">
    <h4>The Pennsylvania State Capital</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

了解有關 CSS 網格的更多資訊

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444989.html

標籤：html css

上一篇：HTML表格邊框不顯示

下一篇：如何在至少一個元素處于活動狀態時顯示按鈕，并在未選擇任何元素時隱藏它？