html - columned 960.gs div 中的列

标签 html css 960.gs

假设我有一个 div 是 960.gs 样式网格的成员。它有图标和文字。现在我希望文本从图标缩进,但是我不能使用网格,因为我已经在一个网格中了,因为我会有很多像这样的 div,每个图标和文本都应该贴在父元素的顶部。

<div id="I_AM_GRID_MEMBER">
<span class="icon"><img src="lala.png"></span>
<span>Some text here </span><br/>
<span>Some text here </span><br/>
<span>Some text here </span><br/>
<span>Some text here </span><br/>
</div>

.icon{
display: inline-block;
float: left;
width: 73px;
height: 56px;
background-color: black;
margin-right: 20px;
}

举个例子: http://jsfiddle.net/Q6ZbH/2/ 问题是:如何缩进我的文本,使其不会真正 float 在图标周围?

对于复杂的解释,我们深表歉意,很难用语言来解释您想要在视觉上实现的目标。

最佳答案

在包含的 DIV 上使用 CSS 图像背景并为其提供足够的填充以将文本推离图标。

#I_AM_GRID_MEMBER {
     background-image:url(/lala.png);
     padding-top: 56px;
     padding-left:73px`enter code here`
}

关于html - columned 960.gs div 中的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13588333/

相关文章:

css - 如何创建两个 div,一个固定大小,另一个 100%

php - 上传图片并将其存储在两个不同的目录中

javascript - 如何将数组值打印到变量?

html - 在 Grid 960 中创建和控制父 div 的嵌套

css - 我可以左对齐还是右对齐使用 960 CSS 框架的网页?

html - 基本 CSS : Understanding 960gs base grid

java - 有没有办法使用 JSoup 操作部分 HTML 页面

javascript - slider 无法显示

html - 修复滚动时隐藏在其他 div 后面的 div

css - spree 3.0 bootstrap 自定义如何