css，相对定位元素中的绝对定位元素混乱

Question

我正试图在我的相对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;
}

Answer 1

对于像这样的事情使用绝对定位只是不好的做法，它会让一切变得更难。你能做的最简单的事情就是让.industryinnerright向右浮动，如：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

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