我有兩個(gè)div(外部& amp內(nèi)心)。外部div的寬度為10%。當(dāng)我放置一個(gè)100%寬度的內(nèi)部div時(shí)，它包含了外部div的10%寬度。這正是它應(yīng)該表現(xiàn)的。

問(wèn)題是，我想把內(nèi)部的div旋轉(zhuǎn)90度，然后它應(yīng)該包含外部div的高度100%。

下面是問(wèn)題截圖。

這是我想要達(dá)到的目標(biāo)

解決方案可以在CSS或Elementor中。

提前感謝。

當(dāng)我將內(nèi)部格旋轉(zhuǎn)90度時(shí)，它仍然是外部格寬度的10%。但是它應(yīng)該擴(kuò)展到外部div高度的100%。

這里有一個(gè)簡(jiǎn)單的例子，說(shuō)明如何使用Grid和一點(diǎn)Flexbox來(lái)實(shí)現(xiàn)這一點(diǎn)(盡管還有很大的改進(jìn)空間):

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {margin: 0; padding: 0;}

article {
  padding: 20px;
  background: #e7e7e7;
  display: grid;
  gap: 10px;
  grid-template-columns: min-content min-content 1fr 1fr min-content;
  grid-template-rows: 1fr 1fr 1fr min-content;
  font-family: sans-serif;
}

.hello {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background: rgb(215, 149, 149);
  font-size: 3em;
  display: flex;
}

.hello p {
  align-self: flex-end;
}

.dummy {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
  background: rgb(162, 206, 226);
  text-transform: uppercase;
  writing-mode: vertical-lr;
  font-size: 3em;
}

.ele {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
  display: flex; 
  writing-mode: vertical-lr;
  background: #bca2f8;
  justify-content: space-between;
  font-size: 1.5em;
}

.ele div {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}

.going {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  font-size: 3em;
  text-transform: uppercase;
  background: rgb(217, 180, 111);
}

.lizard {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  aspect-ratio: 1/1;
}

.lizard img, .iceberg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.global {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
  background: white;
  text-transform: uppercase;
  font-size: 2em;
}

.iceberg {
  grid-column: 4 / 5;
  grid-row: 3 / 5;
}

.world {
  grid-column: 5 / 6;
  grid-row: 1 / 5;
  background: rgb(199, 104, 123);
  color: white;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  font-size: 2em;
}

.globab, .going, .world, .ele {padding: 5px;}

<article>
  <div class="hello"><p>Hello</p></div>
  <div class="dummy">Dummy</div>
  <div class="ele">
    <div>World</div>
    <div>Ele.</div>
  </div>
  <div class="going">Going</div>
  <div class="lizard">
    <img src="https://images.unsplash.com/photo-1542884738-c35f6c9c9ea2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="lizard">
  </div>
  <div class="global">global css</div>
  <div class="iceberg">
    <img src="https://images.unsplash.com/photo-1562089727-90aa996a6f18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1548&q=80" alt="iceberg">
  </div>
  <div class="world">My world is not >>></div>
</article>