Как разместить - PullRequest
Новая
       0

Как разместить

0 голосов
/ 19 апреля 2020

У меня есть несколько изображений друг под другом на странице, и я хочу добавить текст наложения диапазона поверх изображения вертикально, а не горизонтально. Мой текущий код показывает (на экране iPhone) текст наложения диапазона горизонтально, но я хочу отобразить это вертикально и читается снизу вверх. Надеюсь, вы, ребята, помогите мне. Спасибо

enter image description here

<html>
<head>
<style>


</style>

<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>

</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>


</body>
</html>

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Вы действительно должны начать использовать CSS вне вашего HTML написания встроенного стиля, между прочим. Узнайте здесь, почему встроенное преобразование не работает для вас: CSS преобразование не работает для встроенных элементов Я установил вашу позицию в положение: абсолютное; 

<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="
  transform: rotate(270deg);
  position: absolute;
  top: +90px;
  z-index: 3;
  background-color:white;
  line-height:50px"> SOLD OUT </span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------
1 голос
/ 19 апреля 2020

Css transforms Css Transforms и источник преобразования не может повредить либо Transform Origin вот краткий пример. 

.wrapper{
  height: 500px;
  width: 500px;
  position:relative;
  background: rgb(220,220,220);
}

.wrapper span{
  position:absolute;
  top:100px;
  left: 20px;
  font-size: 20px;
  font-weight: bold;
  
  /*important part below*/
  transform: rotate(-90deg);
  transform-origin: top left;
}
<div class="wrapper">
  <span>Sold Out</span>
</div>

Таким образом, используя ваш код, вы получите что-то вроде: 

<html>
<head>
<style>


</style>

<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>

</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">Sold Out</span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...