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

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

0 голосов
/ 16 января 2019

Я ищу способ иметь два div над другим, но без текста, идущего под или над плавающим div. Под этим я подразумеваю, что когда текст из элемента <div class="text"></div> достигает <div class="barcode"></div> или <div class="uniq_barcode"></div>, я не хочу, чтобы текст переносился на другую строку вместо перехода под div. Вот изображение с div, который я пытаюсь создать.

Я пытался использовать тег <img> с align:right, но он не работает для второго div. Я думаю, что flexbox или grid справятся с задачей, но я недостаточно силен в этом.

Мой код выглядит так и может быть изменен: 

<div class="custom-container">
    <div class="barcode"></div>
    <div class="text"></div>
    <div class="uniq_barcode"></div>
</div>

Мой CSS выглядит так: 

.barcode, .uniq_barcode {
    width: 300px,
    height: 300px
}

Единственное, что мне действительно нужно, это элемент <dev class="text"></div> для моего текста.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Учитывая структуру вашего 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 голосов
/ 16 января 2019

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

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

...