0

3列のWebページを作成しています。真ん中の列は、すべてのコンテンツが入る場所です。入力するコンテンツは、左揃えの画像の形式で、画像の横にテキストが続く必要があります。そして、これはさまざまな画像と対応するテキストで列全体に流れます。私のレイアウトはdivベースのレイアウトなので、列にメインdiv（page_content）を配置しました。次に、見出し（h4）と見出しの下に、別のdivを入力しました。このdivには、画像の場合はdiv（クラス写真）、テキストの場合はdiv（クラスlat_art）でネストされた個々のdivが含まれます。HTMLコードとCSSコードを以下に示します。私の問題は、最初の画像とテキストが表示されますが、その後は最初のテキストの下に垂直に並んでいます。つまり、divの50％のみを占めて右に浮き、対応するテキストを同じ50％のスペースでその下に押し込みます。個々のdivの高さを指定する必要がある場合、おそらく画像はテキストよりも大きくなります。しかし、そうしてもコードは静的になりません。ダイナミックにしたいと思います。助けてください。

HTMLコード

<div id="page_content"> 
<h4 class="center_cap">LATEST ARTISTS</h4> 
<!--Div for the content begins here--> 
<div> 
<!--Individual div begins here--> 
<div > 
<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 
<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
<!--Individual div ends here--> 

<!--Individual div begins here--> 
<div > 

<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 

<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
</div> 
<!--Div for the content ends here--> 
</div>

外部スタイルシートからのコード

.photo{ 
width:48%; 
float:left; 
padding-left:2px; 
} 
.lat_art{ 
width:50%; 
float:right; 
}
4

3 に答える 3

1

他のすべての単語が「div」であると説明しているため、理解するのは本当に難しいです。とにかく、あなたは3つの列があると説明しましたが、私が正しく理解していれば、あなたが求めているのはちょうど真ん中の列です.

この形式が必要です：

  • 左の写真
  • 写真の右側にヘッダーがあります
  • ヘッダーの下には、画像を囲む多くのテキストがあります

正しい？

問題は、フロートですが、フロートをクリアしないことです。これは、その下のすべてのコンテンツが画像に従って整列されることを意味します。必要なのは、コンテンツをもう折り返したくない場合に clear:both を設定することです。

少し例を書いてテストしました。CSS は、例を短く簡単にするためにインライン化されています。

<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>
于 2009-02-20T13:38:56.953 に答える
0

Yahoo!のYUI Grids CSSを使用することで、おそらく多くの時間と労力を節約できます。

于 2009-02-20T13:43:20.920 に答える