响应式网格忽略了空 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】:div
s 默认显示为全角块。如果您希望col-2
类以指定宽度内联显示,则需要这样声明:
.col-2
display: inline-block;
width: 16.66666%
示例:http://jsfiddle.net/dno5dzgL/5/
【讨论】:
以上是关于响应式网格忽略了空 div?的主要内容,如果未能解决你的问题,请参考以下文章