【问题标题】:How to reduce the distance between the two div如何减少两个div之间的距离
【发布时间】:2018-01-24 16:45:06
【问题描述】:

我创建了一个站点WDguideline.com,里面有很多div。问题是 div 将如何比这个距离更远。
如何减少分区之间的距离?
直播链接:CSS Basic Skill Tester

我所有的 DIV CSS:

.qd1 {
width: 45%;
border: 1px solid #ccc;
margin: 5px;
float: left;
height: auto;

我的网站照片:

【问题讨论】:

  • 给你的网站是好的,给我们一个带有代码的工作示例更好。
  • 填充、边距或换行符

标签: html css margin padding


【解决方案1】:

为什么不使用引导网格,这是非常简单的方法。

xs(适用于手机 - 屏幕宽度小于 768 像素)。
sm(适用于平板电脑 - 屏幕宽度等于或大于 768 像素)。
md(适用于小型笔记本电脑 - 屏幕宽度等于或大于 992 像素)。
lg (适用于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200 像素)。

单行包含 12 个网格(按列)根据您的需要划分列。

将网格设置为 4 表示问题,2 表示广告。
这是代码

<div class="row">
  <div class="col-md-6">
    Question 1 
  </div>
  <div class="col-md-6">
    Question 2      
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    Question 1 
  </div>
  <div class="col-md-6">
    Question 2      
  </div>
</div>

Check for more information 希望对您有所帮助

【讨论】:

    【解决方案2】:

    通过检查您的网站,我可以在 exam_style.css:566 找到这个

    .qd1 {
        width: 45%;
        border: 1px solid #ccc;
        margin: 5px;
        float: left;
        height: auto;
    }
    

    margin 属性决定了您希望在选择器之外的距离(在本例中为.qd1,即您的 div 类)。

    只需将margin 设置为 0(或低于 5px 的值),您就会看到您的 div 越来越近了。

    现在,作为旁注,当为您的问题提供一个工作实例作为示例时,最好使用 JSFiddle、CodePen 等工具。这样,当您的网站更改内容时,问题仍然有参考(并且它很可能会在未来几年内)。

    【讨论】: