定位跨度相对于彼此

Question

我有三个包含在容器中的span元素。我希望第一个跨度是其他两个跨度的两倍并向左浮动。另外两个应该在第一个的左边。但是在不同的线上，它们垂直占据相同的高度。我尝试了很多不同的方法，但我无法让它工作。有没有人知道我怎么能做到这一点？

<div id="wrapper>
  <span id="span1>text1</span>
  <span id="span2>text2</span>
  <span id="span3>text3</span>
</div>

Answer 1

查看example I've made for you

你需要所有内部空间向左浮动，而不仅仅是控制尺寸：

div{width:200px;height:200px;border:solid 1px black}
#s1{float:left;background:red;width:50%;height:100%;}
#s2{float:left;background:green;width:50%;height:50%;}
#s3{float:left;background:yellow;width:50%;height:50%;}