将两个 div 放在另一个 div 上，并且仍然换行答案

【问题标题】：Having two div over another one and still wrapping text将两个 div 放在另一个 div 上，并且仍然换行
【发布时间】：2019-01-17 02:11:52
【问题描述】：

我正在寻找一种将两个 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> 元素。

谢谢。

【问题讨论】：

你的css在哪里？
在这里我添加了我的 CSS，但由于我不知道如何使它工作，所以我没有更多。

标签： html css css-position

【解决方案1】：

考虑到您的 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 class="text"></div> 的文本仍然会超过另外两个 div。如果文本到达 div，我需要想办法让文本在另一行上进行。
确实我的解决方案是一种解决方法，您绝对应该以不同的方式构建您的 HTML 并使用网格或 flex 以获得更好和响应更快的结果。

【解决方案2】：

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

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

【讨论】：