css，相对定位元素内的绝对定位元素杂乱无章答案

【问题标题】：css, absolute positioning elements within relative positioning elements cluttering upcss，相对定位元素内的绝对定位元素杂乱无章
【发布时间】：2017-03-09 06:02:38
【问题描述】：

我正在尝试在我的相对 div 元素中使用绝对定位来定位我的元素。但它相互混淆，如下图所示：

可能不是最好的图片。但是有两个相同的 div 在彼此之上。

我想要将第二个副本放在第一个副本之下，如果还有更多，依此类推。并认为相对是这样做的方法。但是，如果它们具有绝对定位，我似乎对相对容器内的 div 感到复杂？

 <div class="industryoutter">
        <div class ="industryinnerleft">
        Agricultural Chemicals
        </div>
        <div class ="industryinnerright">
        C
        </div>
   </div>
   <div class="industryoutter">
        <div class ="industryinnerleft">
        Agricultural Chemicals
        </div>
        <div class ="industryinnerright">
        C
        </div>
   </div>

css

.industryoutter {
    position: relative;
    background-color: #c0c0c0;
    width: 210;
}

.industryinnerleft {
    position: absolute;
    left: 5px;
}

.industryinnerright {
    position: absolute;
    right: 5px;
}

【问题讨论】：

width: 210 将什么也不做，因为您省略了单位（除了 0 长度外，这是强制性的）。除此之外，我完全不清楚你想要实现什么。另外，请理解在块级元素上设置position: absolute 会消除该元素尽可能多地获取宽度的行为。相反，它会缩小到容纳其内容所需的最小大小。除此之外，还请注意，您的外部 div 的计算高度将为 0，因为它只有具有 position: absolute; 的子级
尝试增加.industryoutter的高度
这样的定位不是好的做法，如果你开始将它用于这样的事情会导致很多的问题。使用简单的 float 或 flex-box 布局会更好

标签： html css

【解决方案1】：

对这样的事情使用绝对定位是一种不好的做法，它会让一切变得更加困难。您可以做的最简单的事情就是将.industryinnerright 正确浮动，例如：

.industryoutter {
  position: relative;
  background-color: #c0c0c0;
  width: 210px;
  overflow: hidden;
}
.industryinnerright {
  float: right
}

<div class="industryoutter">
  Agricultural Chemicals
  <span class="industryinnerright">C</span>
</div>
<div class="industryoutter">
  Agricultural Chemicals
  <span class="industryinnerright">C</span>
</div>

确保将overflow: hidden; 添加到.industryoutter，这样它就会增长到适合其内容的高度。您也不再需要将左侧文本包装在 div 中。

【讨论】：

你是如何得到这个输出的？我的意思是我在小提琴上试过你的代码，它似乎只是并排打印。你最好给industryoutter增加一个高度，然后它会按预期工作。
@AakashThakur 你是什么意思？在这种情况下，无需添加设定高度。现在修复了一个小错误
即使使用更新的代码，您仍然无法实现：jsfiddle.net/ztfeor7c/2
@AakashThakur 你还没有更新代码 -_- 检查 HTML，第一个 div 不需要
@AakashThakur 你是什么意思？

【解决方案2】：

只需在容器中设置一个固定高度即可使用您的内部 div。

.industryoutter {
    position: relative;
    background-color: #c0c0c0;
    width: 210px;
    height: 50px;
}

【讨论】：