如何让文本从较小的div开始？

Question

嗨,我想制作一个像图片中所示的html页面.两个div彼此相邻.右边的Div有更多的高度.文本从div1开始,但也必须低于div2.我应该为此写什么HTML？

我使用float:left显示彼此相邻的图像; 但是包含文本的div从div2开始,在div1下面留下一个空格到文本的开头.Div2高度不固定.Div1有固定的高度.

Answer 1

这是小提琴

<div id='d1'>
  This is left one...
</div>

<div id='d2'>
  This is right one...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies pulvinar venenatis.
Maecenas a erat sed augue viverra volutpat sit amet sed nulla. Nunc velit metus, vulputate sit amet interdum ut, egestas quis velit. Nunc porta nisl nisi. Duis vitae elit diam. Proin lacinia sodales nulla non aliquet. Duis egestas nunc in nisl pulvinar scelerisque.
Phasellus dignissim dolor sed massa fermentum sagittis. Phasellus nec neque sed nibh ultricies elementum facilisis in turpis. Pellentesque id arcu orci, non feugiat massa. Nunc dapibus volutpat arcu vitae luctus.
Phasellus sollicitudin enim tellus. Sed et lectus vitae urna sollicitudin sagittis. Pellentesque volutpat massa id erat vestibulum sed sodales nulla ullamcorper. Nullam convallis commodo massa id consectetur.

和CSS

#d2 {
  width: 40%;
  height: 125px;
  border: solid #000000 2px;
  float: right;
}

编辑

纠正Sowmya指出的问题; 你需要在CSS中添加以下内容:

div {
  margin: 5px;
}

#d1 {
  border:1px solid black;
  width:100px;
  height:100px;
  float: left;
}

更新小提琴