divをdivの下に置くにはどうすればよいですか？

Question

私はこれで少し希望がありません - 私は既に多くの答えがあることを知っていますが、私のウェブサイトを維持するためにがほとんど反応する、私はどのように位置の側面を変更することなく、センターはもう一方の上にありますか？フッターはメインコンテンツとは無関係です。

現在彼らは、ページの中央でお互いを重ねているが、私は「コンテナ」div要素は「アイコン-DIV」

.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.icon-div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-100%); 
 
    align: center; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <img alt="Robert Xu" width="380" title="Robert Xu" src="http://i.imgur.com/gTgVruY.jpg"><br /> 
 
    <h1>徐博</h1> 
 
    <h4 style="margin-top:0px;">Robert Xu</h4> 
 
    <p><span class="zh">中國 上海</span><span class="dot">&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;</span><span class="en">Melbourne, Australia</span></p> 
 
</div> 
 
<div class="icon-div"> 
 
    <p class="en"> 
 
    <a class="icon" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    </p> 
 
</div> 
 
<div class="footer"> 
 
    <p class="footer-text">&#169; 2014-2016 Robert Xu. All Rights Reserved.</p> 
 
</div>

Answer 1

の上にある道を見つけたいですこれは、親のdivがabsoluteである場合のようになり、2つのdivをabsoluteとマークすることなく親の中に配置します。

.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.icon-div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-100%); 
 
    align: center; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div> 
 
    <img alt="Robert Xu" width="380" title="Robert Xu" src="#"><br /> 
 
    <h1>徐博</h1> 
 
    <h4 style="margin-top:0px;">Robert Xu</h4> 
 
    <p><span class="zh">中國 上海</span><span class="dot">&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;</span><span class="en">Melbourne, Australia</span></p> 
 
    </div> 
 
    <div> 
 
    <p class="en"> 
 
    <a class="icon" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="footer"> 
 
    <p class="footer-text">&#169; 2014-2016 Robert Xu. All Rights Reserved.</p> 
 
</div>

Answer 2

あなたは、ディスプレイの使用を検討することができます：フレックス、代わりに位置して遊んでFlexはレイアウト

チェックこのスニペット

.maincontainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.container { 
 
    text-align: center; 
 
}

<div class="maincontainer"> 
 
    <div class="container"> 
 
    <img alt="Robert Xu" width="380" title="Robert Xu" src="http://i.imgur.com/gTgVruY.jpg"> 
 
    <br /> 
 
    <h1>徐博</h1> 
 
    <h4 style="margin-top:0px;">Robert Xu</h4> 
 
    <p><span class="zh">中國 上海</span><span class="dot">&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;</span><span class="en">Melbourne, Australia</span> 
 
    </p> 
 
    </div> 
 
    <div class="icon-div"> 
 
    <p class="en"> 
 
     <a class="icon" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
     <a class="icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
     <a class="icon" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    </p> 
 
    </div> 
 
    <div class="footer"> 
 
    <p class="footer-text">&#169; 2014-2016 Robert Xu. All Rights Reserved.</p> 
 
    </div> 
 
</div>

ための応答性である

は、それはあなたが所定の位置に絶対的である共通の親のdivを持っているし、絶対としてマークせずに親の内部で2つのdivを置くことができ