当前位置： 文江博客话题详情

轮播中的第一个元素在加载时未应用 100% 高度？

发布于 2024-12-02 00:01:28 字数 13916 浏览 2 评论 0原文

如果您查看此处，您会在加载页面时看到顶部有一个 DIV。它被称为“内容”，“content_container”包裹着它，最后，“页面”包裹着它。如果单击左下或右下箭头，您将看到具有相同标签的其他 DIV，但它们正确垂直对齐。我最接近修复它的是当我检查第一个轮播元素（顶部的元素）并看到它确实是 height:100%;就像它应该的那样。但是，如果您向右或向左检查其他 DIV，它们的高度也为：100%；当您取消选中高度时：100%； DIV 移至顶部。我唯一的想法是，也许页面周围的另一个 DIV 不会让“页面”在第一次加载页面时变为高度：100%。除此之外我100%迷失了。

你无法查看源代码，因为使用 Tumblr 主题时，你要为每个帖子单独创建代码，所以如果你从你的角度查看源代码，那么代码并不是我所看到的那样。整个主题代码如下： PS：文本和引用帖子是唯一垂直对齐的帖子，因此请查看这些帖子。我发布了整个代码，以防我犯了一个阻止 height:100%; 的错误。从加载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<!-- Created by roseanneconner, powered by Tumblr. -->

<title>Earl Larson</title>

<link rel="stylesheet" href="http://static.tumblr.com/ux4v5bf/Btelpy2ff/fortheweb.css"    
type="text/css" charset="utf-8" /> 

<link rel="stylesheet" type="text/css" media="screen"  
href="http://jquery.malsup.com/cycle/cycle.css" />

<style type="text/css">

html {
height: 100%;
}

body {
height:100%;
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif;
background:#FFF url('') no-repeat center center fixed;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}

.holder {
height:100%;
margin:auto;
}

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

td a {
margin: 5px;
}

a {
text-decoration:none;
}

#page{height:100%;display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/ 

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

#page{height:100%;width:465px; font-size:13px; line-height:15px;}
#content_container{display:table-cell;vertical-align: middle;}
#content{ border:1px solid #666; padding:10px; padding-top:0px;}

#page li {
list-style:none;
border:1px solid #000;
padding:5px;
padding-top:3px;
padding-left:6px;
margin-bottom:-1px;
}

#page a {
display:inline-table;
height:19px;
margin-bottom:-3px;
}

#page a:hover {
border-bottom:1px solid #000;
height:18px;
}

#page h1 {
padding-top:6px;
padding-bottom:3px;
}

.photo {
position:relative;
overflow: hidden;
width: 620px;
height: 451px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#photo {
max-width:550px;
max-height:510px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.caption {
position:absolute;
right:12px;
margin-top:20px;
margin-bottom:-10px;
background:#9dc6e8 url('http://static.tumblr.com/ux4v5bf/6frlk3kr0/top.png') no-repeat;
padding:3px;
padding-top:1px;
padding-right:10px;
padding-left:7px;
padding-bottom:6px;
width:150px;
text-align:left;
font-size:11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

#bottom {
margin-top:6px;
margin-bottom:-20px;
}

p {margin: 5px 0 0 0;}

h1, h1, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
font-size:20px;
line-height:20px;
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

blockquote {
margin: 5px 0 0 0;
padding: 0 0 0 8px;
border-left: 2px solid #676d72;
}

blockquote img {
max-height: 100px!important;
max-width: 50px!important;
}

.caption {
position:absolute;
}

#curveLeft {
position:absolute;
margin-top:-3px;
margin-left:-1px;
margin-bottom:-9px;
}

#curveRight {
margin-top:-3px;
margin-left:-9px;
margin-bottom:-9px;
}

#heart {
margin-bottom:-4px;
padding-left:3px;
}

.date {
position:absolute;
bottom:0;
right:0;
padding:11px;
padding-top:10px;
padding-right:10px;
width:100%;
}

.info {
float:right;
font-size:11px;
font-weight:bold;
}

#clock {
margin-bottom:-4px;
padding-left:3px;
}

.nav {
position:absolute;
bottom:-4px;
left:9px;
z-index:5;
}

.next2 {
z-index:2;
margin-left:20px;
}

.prev2 {
z-index:2;
}

.next2 img, .prev2 img {

}

.tags {
position:absolute;
bottom:6px;
margin-left:100px;
font-size:13px;
}

.tags a {
color:#000;
}

.tag {
display:inline-block;
padding:4px;
padding-left:9px;
padding-right:9px;
padding-top:0px;
border:2px solid #000;
margin:0 0 0 9px;
}

.tag:hover {
background:#000;
}

.tag a:hover {
color:#FFF;
}

.audio {
position:absolute;
left:30%;
top:20%;
color:#FFF;
}

#albumArt {
position:absolute;
}

#albumNone {
position:absolute;
}

#albumArt img {
display:block;
width:350px;
height:350px;
}

#albumArtBack img {
display:block;
width:350px;
height:350px;
margin-top:-1px;
}

#albumArtBack {
position:absolute;
margin-left:-8px;
margin-top:0px;
z-index:-1;
}

#albumArtBack img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
opacity:0.2;filter:alpha(opacity=20)
}

.audioHolder {
position:absolute;
width:100%;
height:390px;
}

.audioBox {
position:absolute;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
font-size:14px;
bottom:169px;
margin-left:-31px;
}

@-moz-document url-prefix() {
.audioBox {
bottom:169px;
margin-left:-31px;
}

#song {
margin-left:30px;
}
}

.boxify {
margin:0 0 10px 0;
float:left;
bottom:0;
width:329px;
overflow:hidden;
}

.box {
display:inline-block;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat; 
padding:8px;
padding-left:7px;
padding-right:8px;
padding-top:2px;
}

#song {
margin-left:30px;
}

.playerHolder {
height:11px;
width:5px;
overflow:hidden;
bottom:51px;
margin-left:115px;
float:left;
position:absolute;
z-index:3;
}

.player {
margin-top:-8px;
margin-left:-13px;
overflow:hidden;
}

#audioBubble {
position:absolute;
width:25px;
height:25px;
left:0px;
margin-top:10px;
z-index:5;
padding-bottom:1px;
padding-left:1px;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat;
}

#nav-list-example {
margin-left:60px;
list-style:none;
margin-top:0px;
}

#nav-list-example li {
width: 350px;
height: 350px;
float: left;
position: relative;
}

#nav-list-example li div {
width: 345px;
height: 345px;
}

#nav-list-example li div.back {
text-align:justify;
width:334px;
height:341px;
padding:8px;
padding-top:1px;
background:#EEE;
z-index:2;
}

</style>

<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">    
</script>
<script type="text/javascript" 
src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"> 
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({ 
fx: 'scrollRight',
speed: 400,
timeout: 0,
next: '#next2',
prev: '#prev2',
easing: 'easeinout'
});

function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log(  $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
    .append('<h3>' + this.alt + '</h3>');
}
</script>

<script type="text/javascript" src="http://www.zachstronaut.com/js/base.js"></script> 
<script type="text/javascript" src="http://www.zachstronaut.com/js/rotate3di.js"> 
</script> 

<script type="text/javascript" language="javascript" charset="utf-8"> 
$(document).ready(function () {
$('#nav-list-example li div.back').hide().css('left', 0);

function mySideChange(front) {
    if (front) {
        $(this).parent().find('div.front').show();
        $(this).parent().find('div.back').hide();

    } else {
        $(this).parent().find('div.front').hide();
        $(this).parent().find('div.back').show();
    }
}

$('#nav-list-example li').hover(
    function () {
        $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise',    
sideChange: mySideChange});
    },
    function () {
        $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
    }
);
});
</script> 


</head> 

 <body>

<div class="nav">
<a class="prev2" id="prev2" href="#"><img    
src="http://static.tumblr.com/ux4v5bf/Uzmlqczfp/left.png"></a>
<a class="next2" id="next2" href="#"><img  
src="http://static.tumblr.com/ux4v5bf/wfqlqczes/right.png"></a>
</div>


<div class="holder">
    <div id="s7" style="height:100%;">

        {block:Posts}
        <div id="posts">
            {block:Text} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {block:Title}<h1>{Title}</h1>{/block:Title}
                    {Body}
    </div>
</div>
</div>
            {/block:Text}

            {block:Photo}
                    <div class="photo">
                    {block:Caption}
                    <div class="caption">
                    {Caption}
                    <img id="bottom"  
src="http://static.tumblr.com/ux4v5bf/0eNlk3m67/bottom.png">
                    </div>
                    {/block:Caption}
                    <img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
                    </div>
            {/block:Photo}

            {block:Quote} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {Quote}
                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
    </div>
</div>
</div>
            {/block:Quote}

            {block:Link}
                    <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
            {/block:Link}

            {block:Chat}

                    {block:Title}
                        <h1><a href="{Permalink}">{Title}</a></h1>
                    {/block:Title}

                        {block:Lines}
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}

                                {Line}
                        {/block:Lines}
            {/block:Chat}

            {block:Video}
                    <div class="video">{Video-500}</div>

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
            {/block:Video}

            {block:Audio} <div class="audio">
<div class="audioHolder">
<div class="audioBox">

<div class="boxify">
<img id="audioBubble" src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">
</div>

<div class="boxify">
{block:TrackName}
<span class="box" id="song">{TrackName}</span>
{/block:TrackName}
</div>

<div class="boxify">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify">
{block:ExternalAudio}
<span class="box">
<a href="{ExternalAudioURL}">Download</a>
</span>
{/block:ExternalAudio}
</div>

</div>

                    <div class="playerHolder"><div class="player">{AudioPlayerBlack}   
</div> 

</div>


</div>

<ul id="nav-list-example"> 
<li> 
    <div class="front">
<div id="albumNone"><img src="http://static.tumblr.com/ctwb3zj/0Cflqdl2m/poison.png">   
</div>
            {block:AlbumArt}<div id="albumArt"><img src="{AlbumArtURL}"></div>   
{/block:AlbumArt}
    </div> 
    <div class="back">
            {block:AlbumArt}<div id="albumArtBack"><img src="{AlbumArtURL}"></div>  
{/block:AlbumArt}
            <p>{block:Caption}{Caption}{/block:Caption}</p></div> 
</li> 
</ul> 
</div>
            {/block:Audio}

<div class="date">

<div class="tags">
{block:HasTags}{block:Tags}<span class="tag"><a href="{TagURL}">{Tag}</a></span>   
{/block:Tags}{/block:HasTags}
</div>

<div class="info">
{block:NoteCount}{NoteCount} <img id="heart"    
src="http://static.tumblr.com/ux4v5bf/gWmlq420u/heart.png">{/block:NoteCount}
&nbsp;&nbsp;&nbsp;
{block:Date}{MonthNumber} {DayOfMonth} {ShortYear} <img id="clock"    
src="http://static.tumblr.com/ux4v5bf/K5Xlqb2h4/clock.png">{/block:Date}</div> 
</div>  

</div>
        {/block:Posts} 
    </div>

</div>   

 </body>

<script type="text/javascript">_popupControl();</script>
 </html>
原文

If you look here, you will see upon loading the page there is a DIV at the top. It is called "content" with "content_container" wrapped around it and finally, "page" around that. If you click the bottom left or right arrows you will see other DIVs with the same tags but they are properly vertically aligned. The closest I got to maybe fixing it is when I inspected the first carousel element (the one at the top) and saw it was indeed height:100%; like it should. However, if you go to the right or left and inspect the other DIVs they also have height:100%; When you uncheck height:100%; the DIV moves to the top. The only idea I have is that perhaps another DIV around page isn't letting "page" become height:100% when first loading the page. Other than that I'm 100% lost.

You CANNOT look in the source code because with Tumblr themes you are creating the code separate for each post, so if you look at the source code from your perspective the code is not what it looks like on my end. The entire themes code is below: P.S: Text and Quote posts are the only posts that are vertically aligned, so please look at those. I'm posting the entire code incase I have made a mistake that prevents height:100%; from loading.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<!-- Created by roseanneconner, powered by Tumblr. -->

<title>Earl Larson</title>

<link rel="stylesheet" href="http://static.tumblr.com/ux4v5bf/Btelpy2ff/fortheweb.css"    
type="text/css" charset="utf-8" /> 

<link rel="stylesheet" type="text/css" media="screen"  
href="http://jquery.malsup.com/cycle/cycle.css" />

<style type="text/css">

html {
height: 100%;
}

body {
height:100%;
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif;
background:#FFF url('') no-repeat center center fixed;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}

.holder {
height:100%;
margin:auto;
}

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

td a {
margin: 5px;
}

a {
text-decoration:none;
}

#page{height:100%;display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/ 

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

#page{height:100%;width:465px; font-size:13px; line-height:15px;}
#content_container{display:table-cell;vertical-align: middle;}
#content{ border:1px solid #666; padding:10px; padding-top:0px;}

#page li {
list-style:none;
border:1px solid #000;
padding:5px;
padding-top:3px;
padding-left:6px;
margin-bottom:-1px;
}

#page a {
display:inline-table;
height:19px;
margin-bottom:-3px;
}

#page a:hover {
border-bottom:1px solid #000;
height:18px;
}

#page h1 {
padding-top:6px;
padding-bottom:3px;
}

.photo {
position:relative;
overflow: hidden;
width: 620px;
height: 451px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#photo {
max-width:550px;
max-height:510px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.caption {
position:absolute;
right:12px;
margin-top:20px;
margin-bottom:-10px;
background:#9dc6e8 url('http://static.tumblr.com/ux4v5bf/6frlk3kr0/top.png') no-repeat;
padding:3px;
padding-top:1px;
padding-right:10px;
padding-left:7px;
padding-bottom:6px;
width:150px;
text-align:left;
font-size:11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

#bottom {
margin-top:6px;
margin-bottom:-20px;
}

p {margin: 5px 0 0 0;}

h1, h1, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
font-size:20px;
line-height:20px;
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

blockquote {
margin: 5px 0 0 0;
padding: 0 0 0 8px;
border-left: 2px solid #676d72;
}

blockquote img {
max-height: 100px!important;
max-width: 50px!important;
}

.caption {
position:absolute;
}

#curveLeft {
position:absolute;
margin-top:-3px;
margin-left:-1px;
margin-bottom:-9px;
}

#curveRight {
margin-top:-3px;
margin-left:-9px;
margin-bottom:-9px;
}

#heart {
margin-bottom:-4px;
padding-left:3px;
}

.date {
position:absolute;
bottom:0;
right:0;
padding:11px;
padding-top:10px;
padding-right:10px;
width:100%;
}

.info {
float:right;
font-size:11px;
font-weight:bold;
}

#clock {
margin-bottom:-4px;
padding-left:3px;
}

.nav {
position:absolute;
bottom:-4px;
left:9px;
z-index:5;
}

.next2 {
z-index:2;
margin-left:20px;
}

.prev2 {
z-index:2;
}

.next2 img, .prev2 img {

}

.tags {
position:absolute;
bottom:6px;
margin-left:100px;
font-size:13px;
}

.tags a {
color:#000;
}

.tag {
display:inline-block;
padding:4px;
padding-left:9px;
padding-right:9px;
padding-top:0px;
border:2px solid #000;
margin:0 0 0 9px;
}

.tag:hover {
background:#000;
}

.tag a:hover {
color:#FFF;
}

.audio {
position:absolute;
left:30%;
top:20%;
color:#FFF;
}

#albumArt {
position:absolute;
}

#albumNone {
position:absolute;
}

#albumArt img {
display:block;
width:350px;
height:350px;
}

#albumArtBack img {
display:block;
width:350px;
height:350px;
margin-top:-1px;
}

#albumArtBack {
position:absolute;
margin-left:-8px;
margin-top:0px;
z-index:-1;
}

#albumArtBack img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
opacity:0.2;filter:alpha(opacity=20)
}

.audioHolder {
position:absolute;
width:100%;
height:390px;
}

.audioBox {
position:absolute;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
font-size:14px;
bottom:169px;
margin-left:-31px;
}

@-moz-document url-prefix() {
.audioBox {
bottom:169px;
margin-left:-31px;
}

#song {
margin-left:30px;
}
}

.boxify {
margin:0 0 10px 0;
float:left;
bottom:0;
width:329px;
overflow:hidden;
}

.box {
display:inline-block;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat; 
padding:8px;
padding-left:7px;
padding-right:8px;
padding-top:2px;
}

#song {
margin-left:30px;
}

.playerHolder {
height:11px;
width:5px;
overflow:hidden;
bottom:51px;
margin-left:115px;
float:left;
position:absolute;
z-index:3;
}

.player {
margin-top:-8px;
margin-left:-13px;
overflow:hidden;
}

#audioBubble {
position:absolute;
width:25px;
height:25px;
left:0px;
margin-top:10px;
z-index:5;
padding-bottom:1px;
padding-left:1px;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat;
}

#nav-list-example {
margin-left:60px;
list-style:none;
margin-top:0px;
}

#nav-list-example li {
width: 350px;
height: 350px;
float: left;
position: relative;
}

#nav-list-example li div {
width: 345px;
height: 345px;
}

#nav-list-example li div.back {
text-align:justify;
width:334px;
height:341px;
padding:8px;
padding-top:1px;
background:#EEE;
z-index:2;
}

</style>

<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">    
</script>
<script type="text/javascript" 
src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"> 
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({ 
fx: 'scrollRight',
speed: 400,
timeout: 0,
next: '#next2',
prev: '#prev2',
easing: 'easeinout'
});

function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log(  $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
    .append('<h3>' + this.alt + '</h3>');
}
</script>

<script type="text/javascript" src="http://www.zachstronaut.com/js/base.js"></script> 
<script type="text/javascript" src="http://www.zachstronaut.com/js/rotate3di.js"> 
</script> 

<script type="text/javascript" language="javascript" charset="utf-8"> 
$(document).ready(function () {
$('#nav-list-example li div.back').hide().css('left', 0);

function mySideChange(front) {
    if (front) {
        $(this).parent().find('div.front').show();
        $(this).parent().find('div.back').hide();

    } else {
        $(this).parent().find('div.front').hide();
        $(this).parent().find('div.back').show();
    }
}

$('#nav-list-example li').hover(
    function () {
        $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise',    
sideChange: mySideChange});
    },
    function () {
        $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
    }
);
});
</script> 


</head> 

 <body>

<div class="nav">
<a class="prev2" id="prev2" href="#"><img    
src="http://static.tumblr.com/ux4v5bf/Uzmlqczfp/left.png"></a>
<a class="next2" id="next2" href="#"><img  
src="http://static.tumblr.com/ux4v5bf/wfqlqczes/right.png"></a>
</div>


<div class="holder">
    <div id="s7" style="height:100%;">

        {block:Posts}
        <div id="posts">
            {block:Text} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {block:Title}<h1>{Title}</h1>{/block:Title}
                    {Body}
    </div>
</div>
</div>
            {/block:Text}

            {block:Photo}
                    <div class="photo">
                    {block:Caption}
                    <div class="caption">
                    {Caption}
                    <img id="bottom"  
src="http://static.tumblr.com/ux4v5bf/0eNlk3m67/bottom.png">
                    </div>
                    {/block:Caption}
                    <img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
                    </div>
            {/block:Photo}

            {block:Quote} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {Quote}
                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
    </div>
</div>
</div>
            {/block:Quote}

            {block:Link}
                    <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
            {/block:Link}

            {block:Chat}

                    {block:Title}
                        <h1><a href="{Permalink}">{Title}</a></h1>
                    {/block:Title}

                        {block:Lines}
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}

                                {Line}
                        {/block:Lines}
            {/block:Chat}

            {block:Video}
                    <div class="video">{Video-500}</div>

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
            {/block:Video}

            {block:Audio} <div class="audio">
<div class="audioHolder">
<div class="audioBox">

<div class="boxify">
<img id="audioBubble" src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">
</div>

<div class="boxify">
{block:TrackName}
<span class="box" id="song">{TrackName}</span>
{/block:TrackName}
</div>

<div class="boxify">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify">
{block:ExternalAudio}
<span class="box">
<a href="{ExternalAudioURL}">Download</a>
</span>
{/block:ExternalAudio}
</div>

</div>

                    <div class="playerHolder"><div class="player">{AudioPlayerBlack}   
</div> 

</div>


</div>

<ul id="nav-list-example"> 
<li> 
    <div class="front">
<div id="albumNone"><img src="http://static.tumblr.com/ctwb3zj/0Cflqdl2m/poison.png">   
</div>
            {block:AlbumArt}<div id="albumArt"><img src="{AlbumArtURL}"></div>   
{/block:AlbumArt}
    </div> 
    <div class="back">
            {block:AlbumArt}<div id="albumArtBack"><img src="{AlbumArtURL}"></div>  
{/block:AlbumArt}
            <p>{block:Caption}{Caption}{/block:Caption}</p></div> 
</li> 
</ul> 
</div>
            {/block:Audio}

<div class="date">

<div class="tags">
{block:HasTags}{block:Tags}<span class="tag"><a href="{TagURL}">{Tag}</a></span>   
{/block:Tags}{/block:HasTags}
</div>

<div class="info">
{block:NoteCount}{NoteCount} <img id="heart"    
src="http://static.tumblr.com/ux4v5bf/gWmlq420u/heart.png">{/block:NoteCount}
   
{block:Date}{MonthNumber} {DayOfMonth} {ShortYear} <img id="clock"    
src="http://static.tumblr.com/ux4v5bf/K5Xlqb2h4/clock.png">{/block:Date}</div> 
</div>  

</div>
        {/block:Posts} 
    </div>

</div>   

 </body>

<script type="text/javascript">_popupControl();</script>
 </html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

來不及說愛妳 2024-12-09 00:01:28

找到了！

在你设置的地方

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

将其替换为：

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}
#posts{height:100%;margin:0 auto;width:100%; }

然后你就可以开始了。

Found it!

Where you've set

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

replace it with:

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}
#posts{height:100%;margin:0 auto;width:100%; }

And you're good to go.

回复 原文
~没有更多了~

关于作者

森林迷了鹿

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文