html - 如何使文本在较小的 div 下方开始？

Question

您好，我想制作一个如图所示的 html 页面。两个 div 彼此相邻。右边的 Div 有更高的高度。文本从 div1 下面开始，但也必须在 div2 下面。我应该为此编写什么 html？

我使用 float:left 将图像并排显示；但是包含文本的 div 从 div2 下面开始，在 div1 下面留出一个空白空间到文本的开头。Div2 高度不固定。 Div1 具有固定高度。

Answer 1

这是 fiddle

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

Updated fiddle