0
我想用幻灯片做一个图像标题。我已经完成了所有工作,但幻灯片中的文本并未包裹在幻灯片框中。有人请帮助。 使用的jsfiddle链接查看代码:文字没有被包装在一个盒子里
http://jsfiddle.net/anba/t31a4xq0/
HTML
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
<span class="caption simple-caption">
<div class="blogp">
<a href="">Simple Caption</a>
<p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
</div>
</span>
</div>
</body>
</html>
CSS
#mainwrapper {
/*font: 18pt normal Arial, sans-serif;*/
height: auto;
/*margin: 5px 10px ;*/
/*text-align: center;*/
width: 300px;
overflow: visible;
}
/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
cursor: text;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.7);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 150px;
width: 300px;
display: block;
bottom: -70px;
cursor: text; /*line-height: 100pt;*/
text-align: left;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-40%);
opacity: 1;
transform: translateY(-40%);
}
.blogp{
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #FF8000;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:100%;
}
.blogp a{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14pt;
color: #0080C0;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:400px;
}
看看我曾在HTML中使用的数字。我已经输入了1-50,但它只显示到23,文本没有被包装到下一行。
网址无法正常工作 – 2014-10-01 11:40:45
HTTP后加入的空间:// – Anbu 2014-10-01 11:52:10
@Anbu当心,你的HTML代码是无效的(未闭合' div'标记,内联元素内的块元素('span.caption'内的'div.blogp'))。你应该修复它们。另外,没有必要在'JSFiddle'内部放置'
',''和''标签,它们会自动添加。编辑:链接已改变原来的帖子 – pomeh 2014-10-01 11:54:36