第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將旋轉(zhuǎn)的子 div 粘貼到父級的底部

將旋轉(zhuǎn)的子 div 粘貼到父級的底部

瀟瀟雨雨 2023-11-02 21:25:54
我試圖將旋轉(zhuǎn)的文本從頂部滾動到父級 div 再到其底部,問題是由于它是一個旋轉(zhuǎn)元素,我無法將其精確地居中于父級的底部,請檢查下面的演示來理解我的觀點。任何幫助將不勝感激演示.parent {  position: relative;  display: flex;  flex-wrap: wrap;}.section-title {  float: left;  position: sticky;  transform-origin: 0% 0;  transform: rotate(-90deg) translateX(-111%) translateY(0);  font-size: 5em;  line-height: 100%;  font-weight: 600;  top: 0;  text-align: left;  -webkit-transform-origin: 0% 0;  -ms-transform-origin: 0% 0;}.content {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-gap: 5px;}.content div {  background-color: green;  height: 500px;  width: 500px;}.content.two {  z-index: -1;}.content.two div {  background-color: red;  height: 500px;  width: 500px;}<div class="parent">  <div class="content two">    <div></div>    <div></div>    <div></div>  </div></div><div class="parent">  <div class="section-title"> section title </div>  <div class="content">    <div></div>    <div></div>  </div></div><div class="parent">  <div class="content two">    <div></div>    <div></div>    <div></div>  </div></div>
查看完整描述

1 回答

?
哆啦的時光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗 獲得超6個贊

改用writing-mode:


.section-title {

  float: left;

  position: sticky;

  font-size: 5em;

  line-height: 100%;

  font-weight: 600;

  top: 0;

  text-align: left;    

  /* rotate the text */

  writing-mode: tb;

  transform: scale(-1);

  /* don't take any space*/

  width: 0;

}


.content {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  grid-gap: 5px;

}


.content div {

  background-color: green;

  height: 500px;

  width: 500px;

}


.content.two div {

  background-color: red;

}

<div class="parent">

    <div class="content two">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

  </div>

  <div class="parent">

    <div class="section-title"> section title </div>

    <div class="content">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

  </div>


  <div class="parent">

    <div class="content two">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

  </div>


查看完整回答
反對 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號