如何與css對齊

我想以獨特的風格顯示我的字幕。所以我們用下面的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/

來源

2014-10-06 Joshua

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

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

簡單的方法是添加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 
}

來源

2014-10-06 06:19:54 NoobEditor

thanx您的幫助。是的，工作正常。但行結束觸摸橫幅添加。如何避免這一點。任何想法？ – Joshua 2014-10-06 06:27:25

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

@Joshua：從我的小提琴中的img'中刪除'border'，廣告看起來不錯，就像你期望的那樣=> http://jsfiddle.net/329ztxye/2/ – NoobEditor 2014-10-06 06:52:11

如何與css對齊

回答

相關問題