2011-07-05 22 views
0

我有一個主頁佈局,3列與每個人的圖像和標題。 我也有一個字幕,並且我希望字幕在div上或者在整個div上進行擴展,而不用調整它的大小和沒有滾動條。CSS如何使一個文本擴展到一個div,而不調整它的大小和沒有滾動條

在這裏看到的截圖:http://www.alessandroboselli.it/foto/screenshot.jpg

,這裏是所涉及的CSS代碼:

.homepageimage { 
position:relative; 
float:left; /* optional */ 
top:40px; 
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5); 
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5); 
box-shadow: 3px 3px 4px rgba(0,0,0,0.5); 
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')"; 
/* For IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f'); 
} 

.homepageimage a { 
text-decoration: none; 
float: left; 
} 

.homepageimage a .homepageimagetitle { 
display: block; 
font-family: 'Molengo', Arial, serif; 
font-size: 18px; 
font-style: normal; 
font-weight: 400; 
text-shadow: none; 
text-decoration: none; 
letter-spacing: 0.050em; 
word-spacing: 0em; 
line-height: 1.2; 
padding: 10px 0; 
background: #111; 
filter:alpha(opacity=75); 
opacity:.75; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
color: #fff; 
position: absolute; 
top: 0px; 
left: 0px; 
padding: 5px; 
margin: 0; 
width: 190px; 
/*position: absolute; 
right: 20px; 
bottom: 20px; 
filter:alpha(opacity=65); 
opacity:.65; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/ 
} 

.homepageimage a .homepageimagesub { 
display: block; 
font-family: 'Buda', serif; 
font-size: 22px; 
font-style: normal; 
font-weight: 400; 
text-shadow: none; 
text-decoration: underline; 
text-transform: none; 
letter-spacing: 0.007em; 
word-spacing: 0em; 
line-height: 1.15; 
padding: 10px 0; 
background: #111; 
filter:alpha(opacity=75); 
opacity:.75; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
color: #fff; 
position: absolute; 
top: 215px; 
left: 0px; 
padding: 5px; 
margin: 0; 
} 

回答

1

我認爲這是你在找什麼:

overflow: visible; 

http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow

編輯:

溢出的元素必須具有指定的寬度。這應該設置你在正確的方向:

http://jsfiddle.net/2qWYf/2

編輯#2:

如果你希望它匹配的鏈接,試試這個:

http://jsfiddle.net/2qWYf/4/

+0

不,沒有工作,已經嘗試過,也許你沒有看過我發佈的代碼 – Alessandro

+0

你發佈的「代碼」中沒有溢出屬性。如果你想讓文本在沒有調整大小或滾動條的情況下流出div,則需要使用overflow屬性。您還必須指定一個寬度。 – jchavannes

+0

我已經嘗試在任何涉及的類中發佈溢出屬性,但沒有結果,我需要將它放在您的意見中,字幕類或主塊類? – Alessandro

0

忘記「溢出」,只需加上任何寬度即可.homepageimagesub

例如:

width: 400px; 

如果你想不同的尺寸..你當然需要單獨添加這些寬度的。

http://jsfiddle.net/2qWYf/3/

爲使其正確的緣故..你可能想控制#side-left#side-right元素的寬度,因爲它們是.homepageimagesub元素的父元素,並控制它們的寬度。

關於正確..您目前有重複ID's,那是不正確的標記。基本規則是使用class而不是id,只要您有多個具有相同名稱的元素。

+0

非常感謝! – Alessandro

相關問題