html - 相对于彼此定位跨度

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

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

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%;}