具有绝对定位子元素的CSS多个相对div

Question

我在创建（有些奇怪）的布局时遇到了一些麻烦，在我尝试做的任何地方都找不到示例。

我想布局多个看起来像这样的块：

 <div class="rel">
     <div class="item">--- a</div>
     <div class="item">- b</div>
     <div class="item">c</div>
 </div>

其中所有.item元素都彼此重叠，但是.rel元素通常布局，因此它们都是可见的。重要的是要注意，.rel中的所有.item元素的长度将完全相同，但是它们可以是任意长度，因此它们可以换行。这是我正在尝试做的图像：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS85RktuUC5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

我创建了this CodePen。

溶液

[如果其他人发现自己需要这种真正奇怪的布局：CodePen

我在创建（有些奇怪）的布局时遇到了一些麻烦，在我尝试做的任何地方都找不到示例。我想布局多个看起来像这样的块：<...>

Answer 1

我不确定您要实现的目标，但似乎您希望<div class="item">内联显示。您可以使用float=left或display=inline-block代替绝对定位。您的div现在彼此叠合。类似的东西

Answer 2

0
投票

在物品上使用此物品