2つの絶対ボックスがお互いの下に..？

Sry私の英語は悪いです。私は2つのBoxesを持っています.1つは左下に、もう1つは右下に、絶対位置と下部：0px;窓を小さくすると、重なり合ってしまいますが、お互いの下に行くべきです（まだそのコードはありません）。最大幅で試してみましたが、私は "poition：absolute;"と推測しています。それを破壊する。2つの絶対ボックスがお互いの下に..？

<body> 
    <div id="nav"> 
     <p><a href="">MUSIC</a> &nbsp;&nbsp; 
     <a href="">RADIO & LIVE CHAT</a> &nbsp;&nbsp; 
     <a href="">SHOP</a> &nbsp;&nbsp; 
     <a href="">COMMUNITY</a> &nbsp;&nbsp; 
     <a href="">SUBMIT</a> &nbsp;&nbsp; 
     <a href="">CONTACT</a></p> 
    </div> 
    <div id="iconrow"> 
     <a href=""> 
      <img src="../bilder/youtube.png" class="iconrow"/> 
     </a> 
     <a href=""> 
      <img src="../bilder/soundcloud.png" class="iconrow"/> 
     </a> 
     <a href=""> 
      <img src="../bilder/spotify.png" class="iconrow"/> 
     </a> 
    </div> 
</body> 
#nav { 
font-family:Typograph; 
position: absolute; 
bottom: 0px; 
right: 0px; 
padding: 0px 40px 10px 0px; 
font-size: 18px;} 
#iconrow { 
position:absolute; 
bottom: 0px;} 
.iconrow { 
width:50px; 
float:left; 
padding: 0px 0px 25px 20px;}

出典

2017-07-14 Platschie x3

あなたはあなたのコードを表示することができますか？ – Frosty619

'absolute'要素は、ドキュメントフローになると互いの存在を認識しません。それは彼らの一種のポイントです。メディア照会を使用して、ビューが小さすぎて両方に適合しないときを検出したい場合があります。 –

ポジションアブソリュートでは、これを達成できない場合があります。必要なものは、50％の幅を持つ2つのボックス、フローティング（例：左側）、次に特定の画面サイズでボックスの幅を100％に調整するメディアクエリです。

出典

2017-07-14 15:40:51

メディアクエリで単に 'position：relative'を設定するだけです – Morpheus

メディアを使用するクエリの高さを#icon-rowと定義し、その高さの値をbottomの値として#navに割り当てます。さらにいくつかの詳細 - 私のスニペットを見てください。

#nav { 
 
    font-family: Typograph; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    padding: 0px 40px 10px 0px; 
 
    font-size: 18px; 
 
} 
 

 
#iconrow { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    height: 70px; 
 
} 
 

 
.iconrow { 
 
    width: 50px; 
 
    float: left; 
 
    padding: 0px 0px 25px 20px; 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    #nav, 
 
    #iconrow { 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
    #nav { 
 
    bottom: 70px; 
 
    left: 0px; 
 
    padding: 0px 10px 0px 10px; 
 
    } 
 
    .iconrow { 
 
    float: none; 
 
    }

<body> 
 
    <div id="nav"> 
 
    <p><a href="">MUSIC</a> &nbsp;&nbsp; 
 
     <a href="">RADIO & LIVE CHAT</a> &nbsp;&nbsp; 
 
     <a href="">SHOP</a> &nbsp;&nbsp; 
 
     <a href="">COMMUNITY</a> &nbsp;&nbsp; 
 
     <a href="">SUBMIT</a> &nbsp;&nbsp; 
 
     <a href="">CONTACT</a></p> 
 
    </div> 
 
    <div id="iconrow"> 
 
    <a href=""> 
 
     <img src="../bilder/youtube.png" class="iconrow" /> 
 
    </a> 
 
    <a href=""> 
 
     <img src="../bilder/soundcloud.png" class="iconrow" /> 
 
    </a> 
 
    <a href=""> 
 
     <img src="../bilder/spotify.png" class="iconrow" /> 
 
    </a> 
 
    </div> 
 
</body>

出典

2017-07-14 16:10:39 Johannes

2つの絶対ボックスがお互いの下に..？

答えて

関連する問題