两个盒子＆＃39;在另一个和另一个在右边

Question

please click for updated image目前，我的网页如下：

但是我希望底盒适合放在顶部的盒子下方，同时将盒子放在右边的同一个地方。

这就是我现在所拥有的

#intro-chemistry{
    background-color: #C7C7C7;
    border-top: 7px solid rgb(177, 177, 177);
    width: 242px;
    height: 103px;
    padding: 13.75px;
    margin: 13.75px 13.75px;
    text-align: left;
    float: left;
}

#intro-physics{
    background-color: #C7C7C7;
    border-top: 7px solid rgb(177, 177, 177);
    width: 238px;
    height: 285px;
    padding: 13.75px;
    margin: 13.75px 13.75px;
    text-align: 10, 10, 10, 10;
    float: left;
}

#intro-classic{
    background-color: #C7C7C7;
    border-top: 7px solid rgb(177, 177, 177);
    width: 242px;
    height: 103px;
    padding: 13.75px;
    margin: 13.75px 13.75px;
    text-align: left;
    float: left;
}

我试图获得这个盒子＆＃34; classic＆＃34;适合在盒子下面＆＃34;化学＆＃39;而盒子的物理学＆＃39;留下来。

Answer 1

您必须更改HTML结构。

<强> HTML

<div class="col-left">
  <div id="intro-chemistry">
    Chemistry
  </div>
  <div id="intro-classic">
    Classic
  </div>
</div>

<div class="col-right">
  <div id="intro-physics">
    Physics 
  </div>
</div>

<强> CSS

.col-left{
  float: left;
  width: 242px;
}
.col-right{
  float: right;
}