4

誰かが div タグを使用して背景画像を含むテキストを表示する html を見せてくれます

<div class='main'>
   <div class='img1'>
      SOME TITLE TEXT
   </div>  
</div>";
<div class='img2'>"
  SOME DESCRIPTION TEXT HERE
</div>"

ここで、クラス img1 と img2 には 2 つの背景画像が含まれ、img2 の対応する div が img1 の隣に (ギャップなしで) 表示されます。内容は異なるが形式は同じものを表示するには、パターン全体を数回繰り返す必要があります。

<!-- GROUP 1 -->  
<div class='main'>
   <div class='img1'>
      SOME TITLE TEXT 1
   </div>  
</div>";
<div class='img2'>"
  SOME DESCRIPTION TEXT HERE 1
</div>"
<!-- GROUP 2 -->  
<div class='main'>
   <div class='img1'>
      SOME TITLE TEXT 2
   </div>  
</div>";
<div class='img2'>"
  SOME DESCRIPTION TEXT HERE 2
</div>"

しかし、上記のように、どの 2 つのグループにも分離がないことがわかりました。率直に言って、私は html の経験がまったくなく、他の人からコードをコピーしただけです。しかし、オンラインで検索した後、
コマンドを見つけました。そのタグをグループ間に追加しようとしましたが、ブレークが予想よりも多すぎるようです。より小さなギャップで分離を挿入する他の方法はありますか?

4

4 に答える 4

5

margin次のようtopに与えることができますbottom：

margin: 10px 0;

上記は10px、上下からマージンを適用します。margin-topやなどの個々のプロパティを使用することもできますmargin-bottom。

于 2013-01-26T09:56:04.503 に答える
3

1 つの方法は、css を使用して要素のスタイルを設定することです。

<style>
.main
{
  margin-bottom: 10px;
}
</style>

必要に応じて変更できます..分離したいdivがわからない

于 2013-01-26T09:53:41.397 に答える
1

改行を追加するには、主に 2 つの方法があります。改行<br>タグを使用する方法と段落タグを使用する方法<p>です。したがって、これらのタグをタグの間に配置するだけです。

于 2013-01-26T09:54:43.303 に答える