如何圍繞文本創建多個 div

Question

我正在嘗試在 span 周圍放置一些 div，但在獲取文本的高度和寬度時遇到問題。 我不使用框陰影，因為它們將在動畫中使用。 這是一個帶有我希望它看起來如何的圖片的鏈接。 這是當前的代碼。

我嘗試了多種方法，包括具有多個相同的跨度，但是我不能包含 ::after 代碼，因為這會使我的代碼變得很奇怪並且具有 .mid 和 .max 寬度，但這也弄亂了我的 ::在代碼和轉換之后。

 :root { --txt-color: #fff; --txt-box-bg: #424242; --main-bg: #000; --transparent: transparent; /* front page title text */ --main-front-color: #e84118; --second-front-color: #fbc531; --third-front-color: #00a8ff; } * { margin: 0px; padding: 0px; } /* Text */ .head-text { font-family: "IBM Plex Sans", sans-serif; color: var(--txt-color); } .main-text { font-family: "IBM Plex Mono" monospace; color: var(--txt-color); } .bold { font-weight: bold; } .normal { font-weight: normal; } .light { font-weight: lighter; } /* Allgin */ .center { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* classes */ .front-page { background-color: var(--main-bg); } .full-page { background-size: cover; height: 100vh; } /* IDs */ #title-text { position: absolute; display: inline-block; background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; background-image: linear-gradient(#000,#000); background-size: 100% 100%; background-position: right; background-repeat: no-repeat; transition: 1s all; font-weight: bold; text-align: center; font-size: 90px; -webkit-text-stroke: 2px var(--main-front-color); animation: stroke-rainbow 13s linear infinite; z-index: 2; } #title-text::after { content: ''; display: block; width: 0; height: 4px; background: var(--txt-color); transition: 1s all; animation: stroke-rainbow 13s linear infinite; } #title-text:hover { background-size: 0% 100%; } #title-text:hover::after { width: 100%; } @keyframes stroke-rainbow { 0% { border-color: var(--main-front-color); -webkit-text-stroke-color: var(--main-front-color); background-color: var(--main-front-color); #title-text::after { } } 25% { border-color: var(--second-front-color); -webkit-text-stroke-color: var(--second-front-color); background-color: var(--second-front-color); } 50% { border-color: var(--third-front-color); -webkit-text-stroke-color: var(--third-front-color); background-color: var(--third-front-color); } 75% { border-color: var(--second-front-color); -webkit-text-stroke-color: var(--second-front-color); background-color: var(--second-front-color); } 100% { border-color: var(--main-front-color); -webkit-text-stroke-color: var(--main-front-color); background-color: var(--main-front-color); } }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i" rel="stylesheet"> <title>Portfolio</title> </head> <body> <!-- Full page intro --> <div class="front-page full-page"> <span id="title-text" class="center head-text">Hi</span> </div> </div> </body> </html>

Answer 1

您可以使用 flexbox 有效地做到這一點。 使用一系列帶有彩色邊框的嵌套 div 創建一個容器 div。 將您的文本放在最中心的 div 中。

HTML：

<div id="container">
  <div id="one">
    <div id="two">
      <div id="three">
        <div id="four">
          <div id="five">
            <div id="six">
              Hi!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

#container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 100vh;
}

#one {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid yellow;
  padding: 20px;
}

#two {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
  padding: 20px;
}

#three {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rebeccapurple;
  padding: 20px;
}

#four {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid dodgerblue;
  padding: 20px;
}

#five {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid lightgreen;
  padding: 20px;
}

#six {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid brown;
  padding: 20px;
}

編輯：回想起來，給每個帶編號的 div（例如#one、#two 等）一個共享類，例如 HTML 中的.colored-box ，然后在您的 CSS 中使用該類所有共享屬性，這樣您就不會重復您的代碼。

HTML：

<div id="container">
  <div id="one" class="colored-box">
    <div id="two" class="colored-box">
      <div id="three" class="colored-box">
        <div id="four" class="colored-box">
          <div id="five" class="colored-box">
            <div id="six" class="colored-box">
              Hi!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.colored-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

#one {
      border: 2px solid yellow;
    }

#two {
      border: 2px solid red;
    }

如何圍繞文本創建多個 div

問題描述

1 個解決方案

解決方案1
2 已采納 2018-11-06 22:20:10

如何圍繞文本創建多個 div

問題描述

1 個解決方案

解決方案1 2 已采納 2018-11-06 22:20:10

解決方案1
2 已采納 2018-11-06 22:20:10