2015-05-09 74 views
-1

其实我不知道如何搜索这个问题,如果它是CSS或PHP的问题。 我有一个div打开一个隐藏的div。 当我测试网站外的代码时,它工作正常。当我在网站内测试时,我拿着这个。 看到图片浏览(http://grab.by/H8TWphp文本不正确显示

代码的完整结构是:

<ol> 
<div><div> 
<div></div> 
<div> 
<li> 
<div class="lyrics"> 
<article> 
<input type="checkbox" id="read_more" role="button"> 
<label for="read_more" onclick=""><span>Lyrics</span><span>Hide Lyrics</span></label> 
<section></section>  
<section><?php $lyric = get_post_meta(get_the_ID(), '_lyrics', true); echo $lyric; ?> 
</section> 
</article>​ 
</div> 
</div> 
</li> 
</ol> 

CSS

div.lyrics { 
position: relative; 
top: 10px; 
} 

article { 
    margin-bottom: 3rem; 
    position: relative; 
    *zoom: 1; 
} 

article:before, article:after { 
    content: ""; 
    display: block; 
} 

article:after { clear: both } 

article figure { 
    float: right; 
    width: 32.5%; 
} 

article section:first-of-type { 
    float: left; 
    width: 62.5%; 
} 

article section:last-of-type { 
    display: none; 
    visibility: hidden; 

} 

section { 
    -webkit-transition: .125s linear; 
    -moz-transition: .125s linear; 
    -ms-transition: .125s linear; 
    -o-transition: .125s linear; 
    transition: .125s linear; 
} 

input[type=checkbox] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
} 

[for="read_more"] { 
    position: absolute; 
    bottom: -3rem; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    padding: .65rem; 
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); 
} 

[for="read_more"]:hover { 
    background: rgba(0,0,0,.5); 
    color: rgb(255,255,255); 
} 

[for="read_more"] span:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

input[type=checkbox]:checked ~ section { 
    display: block; 
    visibility: visible; 
    width: 100%; 
} 

input[type=checkbox]:checked ~ figure { width: 100% } 

input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type { 
    display: none; 
    visibility: hidden; 
} 

input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type { 
    display: block; 
    visibility: visible; 
} 

感谢您的帮助!

+0

替换'<?php $ lyric = get_post_meta(get_the_ID(),'_lyrics',true); echo $ lyric;用一些实际的文本看看是否会发生同样的情况。如果是,你可以确认这是由于你的CSS出现了一些错误。 – Lal

+0

好的我试过了,结果比以前更糟!与实际的文字它只来到一行 – user2078690

+0

可能是您的CS的问题..你可以请张贴你的CSS .. – Lal

回答

0

问题的解决方案来自文本编辑器,我在这里使用每个中断的输入(< br>)我想要的!所以每个文本行都是一段(< p>)。