Fatal编程技术网
  • html/
  • Html 防止边距将元素推出容器

Html 防止边距将元素推出容器

html css

Html 防止边距将元素推出容器,html,css,margin,Html,Css,Margin,我在固定宽度的容器（灰色）中安装三个内联块（黑色）时遇到问题。这些块有边距（橙色），问题是即使实际元素（黑色）仍在其容器（灰色）中，最后一个块仍会被推入下一行 我希望在实际块位于容器外部时，而不是在边距处，将块推入下一行。我该怎么做 参考图像： 编辑：我发现的一个解决方法是将块包装到另一个足够宽的容器中，以覆盖右边距。更新了 这是改进的小提琴： 这里有几个关键样式： 文本对齐：对齐，以便在包含的元素中均匀分布元素 字体大小：0删除内联块元素附带的空白 这个街区： .container:afte

我在固定宽度的容器（灰色）中安装三个内联块（黑色）时遇到问题。这些块有边距（橙色），问题是即使实际元素（黑色）仍在其容器（灰色）中，最后一个块仍会被推入下一行

我希望在实际块位于容器外部时，而不是在边距处，将块推入下一行。我该怎么做

参考图像：

编辑：我发现的一个解决方法是将块包装到另一个足够宽的容器中，以覆盖右边距。

更新了

这是改进的小提琴：

这里有几个关键样式：

文本对齐：对齐，以便在包含的元素中均匀分布元素


字体大小：0
删除内联块元素附带的空白

这个街区：


.container:after{
  content: "";
  width: 100%;
  display: inline-block;
}



要处理元素溢出。
您可以使用flexbox模型而不是内联块，我在JSFIDLE with CROSBROWSER中提供了一个示例：


display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */


你可以通过调整舞台的宽度来获得反应灵敏的效果

您可以将边距放在每个框的左侧，然后将框包装拉到左侧，并留有负边距。例如



部分{宽度：60%；边距：0自动；背景：#f7f7f7；}
第{条左边距：-20px；}
div{宽度：200px；高度：100px；显示：内联块；左边距：20px；背景：黑色；}

演示或它没有发生：沉闷地？这不是默认行为？是的，默认行为，但每种情况都不同<代码>内联块
显示类似于文字，中间有间隙。有多种方法可以消除这些差距。要么删除元素之间的空白，要么尝试这种方法：它似乎不起作用。顺便说一句，利润是我故意的。我要填补空白。我只是不想在只有间隙在容器外时将块推入下一行。@ralph.m：空格和边距是两件不同的事情。问题是，我不知道哪一个是最后一个元素（有更多的块和行）。而且反应灵敏。这个解决方案看起来很整洁。但我还没有看到任何网站使用它的网格布局，可能是因为浏览器支持有限？本文介绍了如何使用Flexbo混合新旧版本以获得最佳的浏览器支持 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
section {width: 60%; margin: 0 auto; background: #f7f7f7;}
article {margin-left: -20px;}
div {width: 200px; height: 100px; display: inline-block; margin-left: 20px; background: black;}

</style>
</head>
<body>
<section>
    <article>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </article>
</section>
</body>
</html>