4

在此处输入图像描述

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

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

4

6 回答 6

5

这是小提琴

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

更新小提琴

于 2013-01-18T07:32:28.357 回答
2

HTML

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

CSS

#id_2 {
    float: right;
    height: xxx;
}
于 2013-01-18T07:30:16.417 回答
2

用于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}

现场演示

于 2013-01-18T07:32:06.757 回答
1

工作演示

你需要使用：

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;  
}
于 2013-01-18T07:48:14.287 回答
0

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

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

于 2013-01-18T07:52:52.060 回答
-2

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

于 2013-01-18T07:28:54.910 回答