时间戳

首页 > 解决方案 > 将两个 div 放在另一个 div 上，并且仍然换行

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

问题描述

我正在寻找一种将两个 div 放在另一个 div 之上的方法，但文本不会位于浮动 div 之下或之上。我的意思是当<div class="text"></div>元素中的文本到达<div class="barcode"></div>or<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>我的文本元素。

谢谢。

标签： htmlcsscss-position

解决方案

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

推荐阅读