4

有人向我展示了一个 html 以使用 div 标签来显示一些包含背景图像的文本

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

这里 img1 和 img2 类包含两个背景图像，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>"

但我发现，如上图所示，任何两个组之间都没有分离。坦率地说，我真的没有html经验，我只是从别人那里复制代码。但是在网上搜索后，我找到了
命令，我尝试在组之间添加该标签，但似乎中断比我预期的要多。有没有其他方法可以插入间隙较小的分隔符？

4

4 回答 4

5

你可以像这样给予margin：topbottom

margin: 10px 0;

以上将应用10px顶部和底部的边距。您还可以使用单个属性，例如margin-top和margin-bottom。

于 2013-01-26T09:56:04.503 回答
3

一种方法是使用 css 来设置元素的样式。

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

您可以根据需要进行更改..不确定您要分隔什么 div

于 2013-01-26T09:53:41.397 回答
1

添加换行符有两种主要方法：通过换行<br>标记和通过段落标记<p>。所以你所要做的就是把这些标签放在你的标签之间。

于 2013-01-26T09:54:43.303 回答
1

将子 div 添加到如下所示的 span

<div class="class1" >
   <span class="span1">
         data1 
       <br>
       <span class="span2">
            data2
       </span>
    </span>
</div>

CSS：

   .span1{
      display:inline-block;
    }
    .span2{
      display:inline-block;     
    }




    </div>
于 2020-04-07T00:57:55.120 回答