如何使这个水平框架与垂直框架相互对齐？

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>