响应式网格忽略了空 div?

Posted

技术标签:

【中文标题】响应式网格忽略了空 div?【英文标题】:Empty div ignored for Responsive Grid? 【发布时间】:2017-06-21 11:23:44 【问题描述】:

我正在开发一个静态的响应式 html 页面。

我创建了一个带有“row”类的 div,然后放置了另一个带有“col-2”类的 div,它是空的,然后是另一个带有“col-2”类的 div,其中包含一些文本。此文本应显示在距浏览器最左侧 16.6% 的位置。但是,情况并非如此,除非我在第一个带有“col-2”类的 div 中放置了一些东西——相反,它将该文本放在页面的最左边,就好像我没有一个带有“col”类的 div -2' 在它之前。

我明白了,因为 div 是空的,它没有被显示,但是我想如何准确地使用网格视图?

代码:

    <div class="section header">    
    <div class="row">
        <div class="col-2"></div>
        <div class="col-2">
            Title 
        </div>
    </div>
</div>

【问题讨论】:

【参考方案1】:

divs 默认显示为全角块。如果您希望col-2 类以指定宽度内联显示,则需要这样声明:

.col-2 
    display: inline-block;
    width: 16.66666%

示例:http://jsfiddle.net/dno5dzgL/5/

【讨论】:

以上是关于响应式网格忽略了空 div?的主要内容,如果未能解决你的问题,请参考以下文章

使用div标签的响应式俄罗斯方块网格

在响应式网格中加载图像时如何使用图像占位符?

响应式网格(网格模板列)

网格项高度与响应式方形子项不匹配

响应式图像的中心网格

创建响应式产品网格。我的宽度怎么了?