- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
首先,我知道这是一个重复的问题(here 或 here),但解决方案对我不起作用。
这是我的问题:我有一个具有以下结构的网页:
<div class="row">
<div class="small-1 columns">...</div>
<div class="small-8 columns">...</div>
<div class="small-3 columns">...</div>
</div>
在我的 8 列中,我有一个 Panel 容器,在它里面:
<div class="row">
<div class="small-1 columns">COLOR</div>
<div class="small-2 columns">TITLE</div>
<div class="small-1 columns">NAME</div>
<div class="small-2 columns">SURNAME</div>
<div class="small-2 columns">ADDRESS</div>
<div class="small-2 columns">POSTAL CODE</div>
<div class="small-2 columns">SUMMARY</div>
</div>
我希望每列都有一个空格分隔符。但是,如果我尝试添加此间隙(使用 margin 属性):
有什么想法吗?
提前致谢!
最佳答案
Foundation 在 .columns 上结合左右填充和百分比宽度创建间隙(也称为装订线)。从 foundation.css 看一下:
.column, .columns {
padding-left: 0.625rem;
padding-right: 0.625rem;
width: 100%;
float: left;
}
.small-1 { width: 8.33333%; }
.small-2 { width: 16.66667%; }
...
通过向列添加边距,您可以扰乱宽度并使 .row > 100% 这就是它中断的原因。作为一般规则,我建议永远不要向 .columns 添加边距,因为它会破坏网格。
您有几个选择:
1 - 折叠行并在子列中添加您自己的填充和其他类
<div class="row collapse">
<div class="small-1 columns"><div class="inner">COLOR</div></div>
<div class="small-2 columns"><div class="inner">TITLE</div></div>
<div class="small-1 columns"><div class="inner">NAME</div></div>
<div class="small-2 columns"><div class="inner">SURNAME</div></div>
<div class="small-2 columns"><div class="inner">ADDRESS</div></div>
<div class="small-2 columns"><div class="inner">POSTAL CODE</div></div>
<div class="small-2 columns"><div class="inner">SUMMARY</div></div>
</div>
.inner {background:#666; margin:0 5px; padding:5px;}
2 - 看起来您正在尝试创建某种图表。为表格数据使用实际的 HTML 表格并不丢人(这就是它的用途)。 Foundation 的默认表格样式实际上非常好。
关于html - 列之间的基础边距不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37481272/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!