【问题标题】：How to make text start below smaller div?如何使文本在较小的 div 以下开始？
【发布时间】：2013-01-01 21:16:36
【问题描述】：

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

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

【问题讨论】：

仅将较大的 div 浮动到右侧。

标签： html css

【解决方案1】：

HTML

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

CSS

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

【讨论】：

不允许使用数字 id。

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个：
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

属性并编辑您自己的代码！

【讨论】：

【解决方案4】：

这里是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小提琴

【讨论】：

我不认为它像他在图片中显示的那样工作jsfiddle.net/eJcQe/2

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

【讨论】：