2行文字/图像组合

Question

我需要在左侧创建两行文本框/图像，在右侧创建一个文本框/图像。我尝试过这种语法，但这只创建了一行 - 如何创建2行？

<div>
  <span style="float: left">
		<font size="30" color="red">Row 1 Left 1</font><br>	
		<img src="C:\1.jpg" alt="" style="width:425px;height:500px;">
	  </span>
  <span style="float: right">
		<font size="30" color="red">Row 1 Rightl</font><br>	
		<img src="C:\4.jpg" alt="" style="width:425px;height:500px;">
	  </span>
</div>
<div>
  <span style="float: left">
		<font size="30" color="red">Row 2 Left</font><br>	
		<img src="C:\2.jpg" alt="" style="width:425px;height:500px;">
	  </span>
  <span style="float: right">
		<font size="30" color="red">Row 2 Right</font><br>	
		<img src="C:\3.jpg" alt="" style="width:425px;height:500px;">
	  </span>
</div>

修改
这是我在尝试语法建议时得到的结果

这就是我想要的显示器

Answer 1

在浮点值之后的第二行CSS中使用clear:both。

Answer 2

已编辑：使用display:block;根div。关于孩子width:1/2和float:left以及float:right

.cont{
 display:block;  
}

.cont-left{
  float: left;
  width:50%;
  }


.cont-right{
  float: right;
  width:50%;
  }

<div class="cont">
<div class="cont-left">
	  <span>
		<font size="30" color="red">Row1 Left</font><br>	
		<img src="C:\1.jpg" alt="" style="width:425px;height:500px;">
	  </span>
	  <span>
		<font size="30" color="red">Row1 Right</font><br>	
		<img src="C:\4.jpg" alt="" style="width:425px;height:500px;">
	  </span>
    </div>
    <div class="cont-right">
	  <span >
		<font size="30" color="red">Row2 Left</font><br>	
		<img src="C:\2.jpg" alt="" style="width:425px;height:500px;">
	  </span>
		<span >
		<font size="30" color="red">Row2 Right</font><br>	
		<img src="C:\3.jpg" alt="" style="width:425px;height:500px;">
	  </span>
    </div>
  </div>