Question

我正在寻找一种使两个div超过另一个div的方法，但不要使文本在浮动div之下或之上。我的意思是，当<div class="text"></div>元素中的文本到达<div class="barcode"></div>或<div class="uniq_barcode"></div>时，我不希望文本换行而不是在div之下。 Here's an image with the div I'm trying to create.

我尝试将<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>元素。

谢谢。

Answer 1

CSS grid和flex就是为这种布局而开发的。这似乎是flexbox的工作。

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

Answer 2

考虑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/

将两个div放在另一个div上并仍包裹文字

2 个答案: