4

ここに画像の説明を入力してください

こんにちは、画像のようなHTMLページを作りたいです。隣り合った2つの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:right2 番目の 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;
}

そして、 私が取り組んだこのデモを見てください

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 に答える