首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >图标字体卡在2div之间

图标字体卡在2div之间
EN

Stack Overflow用户
提问于 2014-05-14 09:09:02
回答 1查看 79关注 0票数 0

我里面有两个div,每个都有两个跨度。其中一个是插入图标字体,另一个是包含文本的字体。只有第一个div有图标。包含图标字体的span将与另一个div重叠,如图所示

我的div和spans代码如下:

HTML

代码语言:javascript
运行
复制
<div class="delivery-container"> <span class="glyphicons nav-icons heart delivery-logo"></span>

    <!-- <h1 class="services-brand">Services We Provide</h1> --> <span class="delivery-desc ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>

</div>

<div class="payroll-container">
    <div class="payroll-logo"></div> <span class="payroll-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>

</div>

<div class="it-container">
    <div class="it-logo"></div> <span class="it-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span></div>
</div>

.glyphicons.nav-icons:before {
    display: block;
    padding: 0 .4em;
    height: 100%;
    margin: auto;
    font: 72px/2em 'Glyphicons Regular';
}

div.delivery-container, div.payroll-container, div.it-container {
    width:100%;
    padding: 2em 0;
    vertical-align: middle;
    border: 1px solid black;
}

span.delivery-logo {
    float:left;
}

任何帮助都很感激。提前感谢!

http://jsfiddle.net/Gdv7A/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-14 09:24:51

在看不到完整代码的情况下,尝试在. overflow: hidden元素上放置一个传递容器元素。

如果您可以显示您的其余代码或创建一个小提琴。

但是在我看到之后,持有您图标的div可能设置为静态高度,或者您的图标在其上有一个位置。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23650224

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档