如何用CSS定位圖片等元素？

我已經試過幾乎所有的東西，但我只是不能似乎得到文本旁邊漂浮的大字母

這裏是代碼：

HTML：

<div class="processlinks-section-template"> 
<div class="processlinks-section-item" data-letter="H"> 
    <div class="processlinks-section-item-title"> 
     <a href="http://aftonbladet.se">Haftonbladet.se</a> 
    </div> 
    <div class="processlinks-section-item-title"> 
     <a href="http://teabagz.com">Hteabagz.com</a> 
    </div> 
</div> 

<div class="processlinks-section-item" data-letter="C"> 
    <div class="processlinks-section-item-title"> 
     <a href="http://Cftonbladet.se">Cftonbladet.se</a> 
    </div> 
    <div class="processlinks-section-item-title"> 
     <a href="http://Cteabagz.com">Cteabagz.com</a> 
    </div> 
</div> 
</div>

CSS：

[data-letter] { 
margin:7px; 
background:#ef8; 
} 
[data-letter]:before { 
content:attr(data-letter); 
font-size:36px; 
margin:7px; 
} 
.processlinks-section-template 
{ 
width: 270px; 
height: 100%; 
} 
} 
.processlinks-section-item-title 
{ 
margin-top:5px; 
} 
.processlinks-section-item-title a 
{ 
color:black; 
} 
.processlinks-section-item-title a:visited 
{ 
color:black; 
} 
.processlinks-section-item-title a:hover 
{ 
color:#0084c9; 
}

任何形式的幫助表示讚賞

注：我有一個附加的東西，所以我寧願只呆在這兩個選擇一個JavaScript。

如果有一個項目似乎毀了設計，我認爲這就是問題所在。

請看：jsbin.com/UHiZUJU/9/edit

來源

2013-10-08 Obsivus

添加float: left到包含字母:before僞元素，clear: left到部分集裝箱：

[data-letter]:before { 
    content:attr(data-letter); 
    font-size:36px; 
    margin:7px; 
    display:inline-block; 
} 
.processlinks-section-item { 
    clear:left; 
}

Updated JSBin

目前您:before psuedo-如果缺少另一個display聲明，元素默認爲display: block意味着它會自動填充其父元素的寬度的100％，並且在它之後有一個換行符（與inline元素相比）。

浮動block元素意味着它只填充它所需要的寬度，而不是填充整個寬度的通常行爲，並且也消除了隱含的換行符。容器上的clear: left只是確保爲每個部分重置浮動。

來源

2013-10-08 15:22:12 Ennui

感謝您的一個很好的解釋！問題是如果有1個項目的設計搞砸了看看：http://jsbin.com/UHiZUJU/9/edit。也可以是每個部分內的1-8項內容。我認爲這是因爲我看到我的鏈接是爲什麼我無法實現設計 – Obsivus

如果內容比這樣的psuedo元素短，您需要添加一個clearfix到容器中。將'overflow：hidden'添加到'.processlinks-section-item'容器類中：[Updated JSBin]（http://jsbin.com/UHiZUJU/16/） – Ennui

如果你想要，你還可以添加一個明確的寬度'：在'psuedo元素之前，以確保它看起來整齊/甚至當前導字母/字符不是相同的寬度。「clearfix」技巧還有很多其他方法，但「overflow：hidden」在這種情況下最爲簡單。 – Ennui

浮動字母和鏈接到左側，並添加與它的clearfix。

Updated jsfiddle

來源

2013-10-08 15:33:46 Sriraman

，使它象你的形象改變你的保證金：汽車7px的;

來源

2013-10-08 15:34:22 Dznr

如何用CSS定位圖片等元素？

回答

相關問題