时间戳

首页 > 解决方案 > 嵌套网格中的子级忽略父级填充

html - 嵌套网格中的子级忽略父级填充

问题描述

这是我的代码

        <div class="uk-container">

            <div class="uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>

                <div class=" global-border outer-grid">
                    <div class="  main-color" uk-grid>
                        <div class="uk-width-2-5 coine-card bg-yellow  inner-grid" >
                        </div>
                        <div class="uk-width-1-5 bg-yellow-lm  timer coine-card   inner-grid">
                        </div>
                        <div class="uk-width-2-5 coine-card bg-yellow  inner-grid" >
                        </div>
                    </div>
                </div>

                <div class=" global-border outer-grid">
                    <div class="  main-color" uk-grid>
                        <div class="uk-width-2-5 coine-card bg-yellow inner-grid " >
                        </div>
                        <div class="uk-width-1-5 bg-yellow-lm timer coine-card  inner-grid ">
                        </div>
                        <div class="uk-width-2-5 coine-card bg-yellow  inner-grid" >
                        </div>
                    </div>
                </div>


                <div class="global-border outer-grid">
                    <div class="bg-yellow" style="height: 200px">
                        some stuff
                    </div>
                </div>

            </div>

        </div>

我有一个带有 3 列的外部网格（它们具有外部网格类），并且在这些列的 2 内部我有另外 3 列 uk-grid（这些具有内部网格类）除了其中一个只有一个 divsome stuff 在里面 ！这是结果

在此处输入图像描述

由于某种原因，内部网格忽略了它们的父级左填充，因为它们的内容似乎粘在一起......只有最密集的具有内部网格的最后一列似乎尊重其父级左填充

为什么会发生这种情况，我该如何解决？

这是jsfiddle

http://jsfiddle.net/pjgr8kb2/

标签： htmlcssgetuikit

解决方案

它是：

.uk-grid {
 margin-left: -30px;
}

删除它，你应该得到你想要的结果！

注意：我还注意到您的HTML中有一些格式错误，例如：

 <div class="  main-color" uk-grid>

应该看起来像这样：

 <div class="main-color uk-grid">

推荐阅读