将 div 定位在另一个 div 下

Question

我需要将一个 div 放在另一个 div 下。我发现了关于这个主题的另一个问题，他们建议我使用主要的<div> 和另一个<div>s 作为孩子。 我试图这样做，但我不明白我的代码部分是否不起作用或者我做错了。

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>

Answer 2

<div id="content">

  <div class="clear">

    <div id="uscite" class="one_half" style="background:blue">
        your content
    </div>
    <div id="it" class="one_half" style="background:red">
        your content
    </div>

  </div>

  <div style="background:orange">
   your content
  </div>

</div>

#content{width:100%;text-align:center}
.one_half{width:50%;float:left}
.clear{overflow:hidden;display:block}

Answer 3

超级简化，仅在 chrome(html 5) 中测试

<div class="wrapper">
    <div class="inner">
       <div class="column">
          left
       </div>
       <div class="column">
         right
       </div>
    </div> 
    <div class="footer">
       footer
    </div>
</div>

http://jsfiddle.net/g3do9q0b/10/