兩個右側

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

我試圖讓盒子「經典」，以適應權下的盒子「化學反應」，而選擇‘物理’原地踏步。

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