对自行调整大小的 div 进行故障排除答案

【问题标题】：Troubleshooting divs that have resized on their own对自行调整大小的 div 进行故障排除
【发布时间】：2015-06-18 19:29:07
【问题描述】：

我目前正在构建一个 div 网格布局网页。显然，我一直在编辑每个单独的方块来填补角色。但是由于某种原因，我注意到虽然我已将大多数 div 指定为 200x200px 和一对 200x400px ，但由于某种原因，其中一些已经调整了额外的 10px ，因此正方形开始重叠。我以前没有这个问题，但我现在有。有人可以解决这个问题吗？因为我看不到问题。

问题在于“steps” div 和“special offer” div，其中背景也调整为一半大小。 Here is a livelink to the page in question, please look at the source code. I shall remove this when the question is answered for future posterity of the post.

这是 HTML：

<div class="col">
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" height="200" width="200"/><p style="margin: 10px 20px;">Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div>
    </div>
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP3.jpg" height="200" width="200"/><p style="margin: 10px 20px;">We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div>
    </div>
</div>
<div class="col">
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP2.jpg" height="200" width="200"/><p style="margin: 10px 20px;">We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div>
    </div>
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP4.jpg" height="200" width="200"/><p style="margin: 10px 20px;">A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div>
    </div>
</div>

【问题讨论】：

无法访问您本地的 pc 哥们！
@Eirenaios 哈哈哈对不起大家！！！现在修好了！因为这个，我的大脑就是这么炸的！
我已经从你的代码块中删除了多余的</div>。

标签： html css dimensions

【解决方案1】：

应用这个 css

.trigger {
  width: 200px;
  height: 200px;
  overflow: hidden;
  box-sizing: border-box;
}

【讨论】：

我在发布之前尝试过，如果你看一下我已经更新它以显示发生了什么的实时链接，它会切断最后框的右侧并且还会扭曲包含 iframe 的底部 div

【解决方案2】：

如果您为 .trigger 使用填充，请添加 box-sizing: box-border; 属性。

如需更详细的帮助，请发布您的 css 并修复实时链接，因为它会带入您自己拥有的本地文件！

【讨论】：