html - 将 div 定位在另一个 div 下

Question

我需要将一个 div 置于另一个 div 之下。我在这个主题上发现了另一个问题，他们建议我使用主 <div>和另一个<div>作为 child 。我尝试这样做，但我不明白是我的代码部分不起作用还是我做错了。

HTML

<div id="wrapper">
   <div id="uscite" class="block">
      <div id="jp">
         <img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite jappo
      </div>
      <div id="it">
         <img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite ita
      </div>
</div>
<div class="block">
   <a href="https://www.facebook.com/fmpitaly"><img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Facebook" alt="Facebook" /></a>
   <a href="https://twitter.com/FMP_Italy"><img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Twuitter" alt="Twitter" /></a>
</div>

CSS

div#wrapper{
    padding:30px 20px;
    position:absolute;
    right:0;
    border:0px;
}
div#uscite{
    height:35%;
    width:20%;
}
div#jp {
    text-align: center;
    width:50%;
    height:100%;
    float:left;
    border:0px;
}
div#it {
    text-align: center;
    width:50%;
    height:100%;
    float:right;
    border:0px;
}
.block{
    display:block;
}

http://jsfiddle.net/g3do9q0b/

我想要这样的结构

Answer 1

Marc 使用您的示例给出了答案，但方法不是很清楚。当您使用 HTML+CSS 时，您真正想要的是在 boxes 中考虑所有内容。您想要的是两个堆叠在一起的盒子，但最上面的盒子需要包含两个单独的盒子。例如

*----------*
*  1  *  2 *
*     *    *
*----------*
*          *
*     3    *
*          *
*----------*

您希望包含 1 和 2 的框与 3 一样宽，当然 1 和 2 将是该宽度的一半。以这种方式思考应该可以简化开发过程。

#bottomDiv {
    height: 400px;
    width: 500px;
    background-color: lightblue;
}

#topDiv {
    width: 500px;
    height: 400px;
}

#leftDiv {
    width: 50%;
    height: 100%;
    background-color: lightgreen;
    float: left;
}
#rightDiv {
    width: 50%;
    height: 100%;
    background-color: orange;
    float: left;
}

<div id="topDiv">
    <div id="leftDiv"> </div>
    <div id="rightDiv"> </div>
</div>
<div id="bottomDiv">
</div>