html - 如何垂直对齐左右两个div？

Question

我在尝试以某种方式将我的下拉列表与左侧的文本区域垂直对齐时遇到问题。我不知道为什么它会发生冲突。

编辑:感谢您的帮助，我已经进行了更改以实现它。

JSP:

.ExeDropdown{
  	float:left;
    margin-left:50px;
}
div.txt1{
    float: left;
    margin-left:50px;
}
div.txt2{
    float:right;
    margin-right: 120px;
}
.txt3{
  	float:right;
	  margin-right: 120px;
}
#subBtn{
  	position: absolute;
    bottom: 20%;
    left:47%;
}

<div class="ExeDropdown">
    Select an exercise: 
    <select name="ProgExe">
      <option value="exe1">Exercise 1</option>
      <option value="exe2">Exercise 2</option>
    </select>
</div>    
<div class="txt1" >
    <p>Write your source code here:</p>
    <textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
    </textarea>
</div>

/image/Vok8d.jpg

Answer 1

给你:

HTML:

<div class="ExeDropdown">
Select an exercise: 
<select name="ProgExe">
  <option value="exe1">Exercise 1</option>
  <option value="exe2">Exercise 2</option>
</select>
</div>    
<div class="clear"></div>
<div class="txt1" >
<p>Write your source code here:</p>
<textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
</textarea>
</div>

CSS:

.clear{clear:both;}