响应式网格忽略了空 div？

Posted 2023-03-14

【中文标题】响应式网格忽略了空 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/