css，相對定位元素內的絕對定位元素凌亂

我試圖將我的元素與絕對定位放置在我的相對div元素中。但它弄亂的海誓山盟，如本圖片：css，相對定位元素內的絕對定位元素凌亂

可能不是最好的圖片。但是在彼此之上有兩個相同的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; 
}

來源

2016-10-26 vandelay

'width：210'將不會做任何事情，因爲您省略了單位（除0長度外，這是必需的）。除此之外*我完全不清楚你想達到的目標*。另外，請理解，在塊級元素上設置'position：absolute'會消除元素獲取儘可能多的寬度的行爲。相反，它會縮小到保存其內容所需的最小尺寸。除此之外，還請注意，您的外部div的計算高度爲0，因爲它只包含具有「position：absolute」的孩子;' – connexo

嘗試向您的'.industryoutter'添加高度 –

這樣的定位不是好習慣，如果你開始將它用於這樣的事情，它會導致很多問題。使用簡單的浮動或彈性框佈局會更好 –

使用絕對定位這樣的事情僅僅是不好的做法，它使一切困難。你可以做最簡單的事情就是靜靜地飄浮.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中。

來源

2016-10-26 18:27:10

您如何獲得此輸出？我的意思是我在小提琴上試過你的代碼，它似乎只是並排打印。你最好給「行業休閒」增加一個高度，然後按預期工作。 –

@AakashThakur你是什麼意思？在這種情況下，不需要添加設置高度。現在有一個小錯誤被修復 –

檢查你的小提琴yourslef：https：//jsfiddle.net/ztfeor7c/1/ –

只需在容器中設置一個固定高度以與內部div一起工作即可。

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

來源

2016-10-26 18:32:08 alexhenkel

css，相對定位元素內的絕對定位元素凌亂

回答

相關問題