Question

有人向我展示了一个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的经验，我只是从别人那里复制代码。但是在网上搜索之后，我找到了这个命令，我尝试在组之间添加该标签，但似乎中断比我预期的要多。是否有其他方法可以插入较小间隙的分离？

Answer 1

您可以像margin和top这样提供bottom：

margin: 10px 0;

以上将从顶部和底部应用10px页边距。您还可以使用margin-top和margin-bottom等个别媒体资源。

Answer 2

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

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

你可以根据需要改变......不确定你想分开什么div

Answer 3

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

Answer 4

将子div添加到如下所示的跨度

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

在div之前和之后添加换行符的最佳方法是什么？

4 个答案: