如何让文本从较小的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小提琴

Answer 2

HTML

<div id="id_2"></div>
<div id="id_1"></div>
Text text text

CSS

#id_2 {
    float: right;
    height: xxx;
}

Answer 3

第一个div使用float:left，第二个div使用float:right

<强> HTML

<div class="wrap">
<div class="d1"></div>
  <div class="d2"></div>
Lorem ipsum elit Lorem ipsum elit Lorem ipsum elit Lorem it Lorem ipsum elit Lorem it Lorem ipsum elit Lorem ipsum elit Lorem ipsum elit Lorem ipsum elit  
</div>

<强> CSS

.wrap{ background:green;float:left; width:210px}
.d1{display:inline-block; width:100px; height:100px; border:solid red 1px; vertical-align:top; float:left}
.d2{display:inline-block; width:100px; height:180px; border:solid red 1px; vertical-align:top; float:right}

<强> LIVE DEMO

Answer 4

Working Demo

您需要使用：

HTML：

<div class="content left">div1</div>
<div class="content right">div2</div>

CSS：

.content{
border-style:solid;
border-width:5px;
  height:50px;  
  width:45%;
}
.right{
  float:right;
  height:200px;
}
.left{
float:left;  
}

Answer 5

试试这个：
HTML代码：

<div id="box1"></div>
<div id="p"> some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </div>
<div id="box2"></div>  

CSS代码：

#box1
{
  margin:10px 10px 10px 10px;
  float:left;
  width:100px;
  height:100px;
  background-color:#333;
}
#box2
{
  margin:10px 10px 10px 10px;
   float:left;
  width:150px;
  height:200px;
  background-color:#888;
}
#p
{
  margin-left:0;
  width:100px;
  height:auto;
  float:left;
  word-wrap:break-word;
}  

看到这个DEMO
我工作了

word-wrap

属性并编辑自己的代码！

Answer 6

如果没有看到代码，我会说你需要在div2上使用float属性：http://www.w3schools.com/cssref/pr_class_float.asp