我里面有两个div,每个都有两个跨度。其中一个是插入图标字体,另一个是包含文本的字体。只有第一个div有图标。包含图标字体的span将与另一个div重叠,如图所示
我的div和spans代码如下:
HTML
<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/
发布于 2014-05-14 09:24:51
在看不到完整代码的情况下,尝试在. overflow: hidden
元素上放置一个传递容器元素。
如果您可以显示您的其余代码或创建一个小提琴。
但是在我看到之后,持有您图标的div可能设置为静态高度,或者您的图标在其上有一个位置。
https://stackoverflow.com/questions/23650224
复制相似问题