Question

我的主页布局有3列，每个人都有图片和标题。我也有一个字幕，我希望字幕在div上扩展orizzontally而不调整它并且没有滚动条。

点击此处的屏幕截图：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;
}

Answer 1

我认为这就是你要找的东西：

overflow: visible;

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

修改

溢出的元素必须指定宽度。这应该让你朝着正确的方向前进：

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

编辑＃2：

如果您希望它与该链接匹配，请尝试以下方法：

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

Answer 2

忘记“溢出”，只需向.homepageimagesub

添加任何宽度

例如：

width: 400px;

如果你想要不同的尺码......你当然需要单独添加这些宽度。

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

为了使其正确...您可能希望控制#side-left和#side-right元素的宽度，因为它们是.homepageimagesub元素的父元素并控制它们的宽度。

关于正确..你目前有重复的ID's，那是不正确的标记。只要您有多个具有相同名称的元素，基本规则就是使用class而不是id。

CSS如何使文本扩展到div而不调整大小和没有rollbars

2 个答案: