2014-10-06 74 views
1

我想以独特的风格显示我的字幕。所以我们用下面的CSS代码样式如何与css对齐

.title-1 { 
    border-bottom: 1px solid #4db2ec; 
    margin-bottom: 10px; 
    padding-bottom: 4px; 
    position: relative; 
    font-size: 16px !important; 
    color: #FFF } 

.title-1 > span { 
    background: #4db2ec; 
    width: auto; 
    padding: 4px 7px } 

现在我用下面的HTML代码与包装文本中插入广告块。

<div style="float: right; margin-left: 20px;"> 
    <img src="http://domain.com/ad.jpg" height="600" width="160"> 
</div> 
<h2 class="title-1"><span id="location">My Sub Title</span></h2> 

现在我的标题样式是在我的广告区块中进行的操作。如何解决这个问题?

enter image description here

这里是一个的jsfiddle:http://jsfiddle.net/f025d5Lh/

+0

http://jsfiddle.net/px593mxn/ – dfsq 2014-10-06 06:31:24

+0

你可以做这样的事情http://jsfiddle.net/victor_007/z3f6ybqd/ – 2014-10-06 06:51:47

回答

1

简单的方法是添加z-index:-999;.title-1,这将下推relative格低于任何div

Demo

CSS

.title-1 { 
    border-bottom:1px solid #4db2ec; 
    margin-bottom:10px; 
    padding-bottom:4px; 
    position:relative; 
    font-size:16px !important; 
    z-index:-999; /* only change */ 
    color:#FFF 
} 
.title-1 > span { 
    background:#4db2ec; 
    width:auto; 
    padding:4px 7px 
} 
+0

thanx您的帮助。是的,工作正常。但行结束触摸横幅添加。如何避免这一点。任何想法? – Joshua 2014-10-06 06:27:25

+0

@Joshua:添加'padding-left'或'margin-left'都会限制div区域:) – NoobEditor 2014-10-06 06:51:10

+0

@Joshua:从我的小提琴中的img'中删除'border',广告看起来不错,就像你期望的那样=> http://jsfiddle.net/329ztxye/2/ – NoobEditor 2014-10-06 06:52:11