如何使這個水平框架與垂直框架相互對齊？

Question

我做了這個水平框架，現在我想讓它們變成垂直框架。 它們應該彼此對齊，藍色將在左側，紅色將在右側。我需要在代碼中添加什麼來實現它？提前致謝！

#left{ 
 
    height:200px; 
 
    overflow:scroll; 
 
    background-color:blue; 
 
} 
 
#allYourContent{ 
 
    height:2000px; 
 
} 
 
#right{ 
 
    height:200px; 
 
    background-color:red; 
 
}

<div class="row-fluid"> 
 
    <div id="left" class="blue"> 
 
     <div id="allYourContent" class= "content"> 
 
     </div> 
 
    </div> 
 
    <div id="right" class="red">

Answer 1

添加float的第一個div和（可選的，這取決於你的內容）指定的寬度。您可以將它浮動到左側或右側，但float必須應用於html中的第一個div。隨後的div將出現在旁邊並填充剩餘的可用寬度。

#left { 
 
    width: 50%; 
 
    float: left; 
 
    height: 200px; 
 
    overflow: auto; 
 
    background-color: blue; 
 
} 
 
#allYourContent { 
 
    height: 2000px; 
 
} 
 
#right { 
 
    height: 200px; 
 
    background-color:red; 
 
}

<div class="row-fluid"> 
 
    <div id="left" class="blue"> 
 
     <div id="allYourContent" class="content"></div> 
 
    </div> 
 
    <div id="right" class="red"></div> 
 
</div>

Answer 2

所有你需要給它的百分比寬度或固定值，漂浮在CSS中的元素見下文首先：

/*Left Frame */ 
#left {width:300px; float:left;} 
/*Right Frame */ 
#left {width:500px; float:left;} 

Answer 3

最簡單的方法是使用flexbox 。

/************/ 
 

 
    .row-fluid { 
 
     display: flex; 
 
    } 
 

 
    .row-fluid div { 
 
     flex: 1 1 auto; 
 
    } 
 

 
    /************/ 
 

 
    #left{ 
 
     height:200px; 
 
     overflow:scroll; 
 
     background-color:blue; 
 
    } 
 
    #allYourContent{ 
 
     height:2000px; 
 
    } 
 
    #right{ 
 
     height:200px; 
 
     background-color:red; 
 
    }

<div class="row-fluid"> 
 
     <div id="left" class="blue"> 
 
      <div id="allYourContent" class= "content"> 
 
      </div> 
 
     </div> 
 
     <div id="right" class="red"> 
 
     </div> 
 
    </div>