css、相対的な位置決め要素内の絶対位置決め要素が乱雑になる

Question

私の相対的なdiv要素内で絶対位置を指定して要素を配置しようとしています。この写真に示すように、しかし、それは、お互いの上に乱雑だ：おそらく

ない最高の画像。しかし、2つの同じdivがお互いの上にあります。

私は、場所そのものの2番目のコピーが最初のものの下にありたいと思います。そして、相対的な考え方がそれを行う方法でした。しかし、彼らは絶対的な位置付けを持っている場合、私は相対的なコンテナの中の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

がちょうど悪い習慣である、それはすべてが難しくなります。

.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>

あなたはそれがその内容の高さに合わせて成長する.industryoutterにoverflow: hidden;を追加していることを確認してください：あなたができる最も簡単な方法は次のように、ちょうど.industryinnerright権利をフロートすることです。 div内の左のテキストを折り返す必要もなくなりました。

Answer 2

コンテナ内の高さを設定して、内側のdivを操作するだけです。

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