Вопросы Теги

Имея два div над другим и все еще оборачивая текст

Попробуйте этот код: 

{{ wp.do_shortcode('[shortcode]')|raw }}
-2
задан Devoplex 16 January 2019 в 18:11
поделиться

2 ответа

CSS grid и flex были разработаны именно для этого вида макета. Это похоже на работу для flexbox.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

0
ответ дан Kerri 16 January 2019 в 18:11
поделиться

Учитывая структуру вашего HTML-кода, первой попыткой будет следующий CSS (не оптимизированный). Однако, как предполагает @Kerri, в вашем случае было бы лучше использовать flexbox. 

.custom-container{
  position: relative;
  height: 300px;
  width: 300px;
}

.text,
.barcode,
.uniq_barcode{
  position: absolute;
}

.text{
 top:0;
 left:0;
 border: 5px solid red;
 height: 300px;
 width: 300px;
 z-index: 1;
}

.barcode,
.uniq_barcode{
  border: 5px solid blue;
  height: 100px;
  width: 100px;
  z-index: 100;
}

.barcode{
  top: 0;
  left: 200px;
 }
.uniq_barcode{
  top: 200px;
  left: 200px;
}

Вы можете проверить код по этой ссылке: https://jsfiddle.net/8vrwto16/1/

0
ответ дан florian 16 January 2019 в 18:11
поделиться