将div定位在另一个div下

Question

我需要将div放在另一个div下面。我在这个主题上找到了另一个问题，他们建议我使用主<div>和其他<div>作为子项。 我试图这样做，但我无法理解我的部分代码是否无效或我做错了。

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时考虑框中的所有内容。你想要的是两个堆叠在一起的盒子，但顶盒需要包含两个独立的盒子。 E.G。

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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/