html - 帖子用完了

标签 html css themes wrapper tumblr

我正在制作一个 Tumblr 主题，但帖子不断超出我为包装设置的边界。前几篇文章会坚持下去，但在那之后，随后的文章就会脱离，就好像它们根本没有被 div 包裹一样。请帮助我。

这是一张图片:http://postimg.org/image/klkyjsesh/

这是我的部分代码:

	#contentarea {
	    margin-top: 80px;
        width:400px;
	    margin-left: auto;
        margin-right: auto;
        min-height: 100%;
        

	}
	
	.entrygroup {
	    width: 400px;
	    margin-bottom: 10px;
    	background: #fcfcfc;
		margin-left: 8px;
		margin-right: 8px;
		padding: 10px;
		padding-bottom: 30px;
		border-radius: 8px;
		display: block;
		
		
	}
<div id="contentarea">	
<div class="autopagerize_page_element">	
{block:Posts}
    <div class="entrygroup">
		{block:Text}
			<div class="entry">	
		<div class="textpost">
			{block:Title}
				<h3>
					<a href="{Permalink}" style="color: 

black">{Title}</a>
				</h3>
			{/block:Title}
			{Body}
		</div>
		    <ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
		</div>
		{/block:Text}


		{block:Photo} <div class="entry">
		<div class="photopost">	
			<img src="{PhotoURL-400}">
			{block:Caption}{Caption}{/block:Caption}
		</div>
		    <ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
		</div>
		{/block:Photo}
		
		
	
		{block:Photoset} <div class="entry">	
		    <div class="photosetpost">	
			{Photoset-400}
			{block:Caption}{Caption}{/block:Caption}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

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


		{block:Quote}<div class="entry">
		<div class="quotepost">
			{Quote}
	   	{block:Source}<div class="quotesource"><br>&mdash;{Source}

</div>{/block:Source}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

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


		{block:Link}<div class="entry">
		<div class="linkpost">
  			<a href="{URL}" {Target} style="color: black">
{Name}</a>
  			{block:Description}{Description}
{/block:Description}
		</div>
		<ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}
#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">
{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}
</div></div>
		{/block:Link}


		{block:Chat}<div class="entry">
		<div class="chatpost">
			{block:Title}{Title}{/block:Title}
			<table>
				{block:Lines}
				<tr>
					<th>{block:Label}{Label}

{/block:Label}</th>
					<td>{Line}</td>
				</tr>
				{/block:Lines}
			</table>
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

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


		{block:Audio}<div class="entry">
		<div class="audiopost">
			{AudioPlayer}
      	{block:Caption}{Caption}{/block:Caption}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

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


		{block:Video}<div class="entry">
		<div class="videopost">
			{Video-500}
			{block:Caption}{Caption}{/block:Caption}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

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


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

最佳答案

问题出在您的 HTML 代码中，您在错误的位置关闭了 div。

<div id="contentarea">  
    <div class="autopagerize_page_element"> 
    {block:Posts}
        <div class="entrygroup">
            {block:Text}
                <div class="entry"> 
                    <div class="textpost">
                    {block:Title}
                        <h3>
                            <a href="{Permalink}" style="color: black">{Title}</a>
                        </h3>
                    {/block:Title}
                    {Body}
                    </div>
                    <ul class="like-reblog">
                        <li>{LikeButton size="15"}</li>
                        <li>{ReblogButton size="15"}</li>
                        <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                        <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                    </ul>
                    {block:PostNotes}{PostNotes}{/block:PostNotes}
                </div>
        </div>
        {/block:Text}


        {block:Photo}
        <div class="entry">
            <div class="photopost"> 
                <img src="{PhotoURL-400}">
                {block:Caption}{Caption}{/block:Caption}
            </div>
                <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Photo}
            {block:Photoset} 
        <div class="entry">    
            <div class="photosetpost">  
            {Photoset-400}
            {block:Caption}{Caption}{/block:Caption}
            </div>
            <ul class="like-reblog">
                <li>{LikeButton size="15"}</li>
                <li>{ReblogButton size="15"}</li>
                <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
            </ul>
            {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Photoset}
            {block:Quote}
        <div class="entry">
            <div class="quotepost">
                {Quote}
                {block:Source}<div class="quotesource"><br>&mdash;{Source}</div>
                {/block:Source}
            </div>
            <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Quote}
            {block:Link}
        <div class="entry">
            <div class="linkpost">
                <a href="{URL}" {Target} style="color: black">{Name}</a>
                {block:Description}{Description}{/block:Description}
            </div>
                <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Link}
            {block:Chat}
        <div class="entry">
            <div class="chatpost">
                {block:Title}{Title}{/block:Title}
                <table>
                    {block:Lines}
                    <tr>
                        <td>{block:Label}{Label}{/block:Label}</td>
                        <td>{Line}</td>
                    </tr>
                    {/block:Lines}
                </table>
            </div>
                <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Chat}
            {block:Audio}
        <div class="entry">
            <div class="audiopost">
                {AudioPlayer}
            {block:Caption}{Caption}{/block:Caption}
            </div>
            <ul class="like-reblog">
                <li>{LikeButton size="15"}</li>
                <li>{ReblogButton size="15"}</li>
                <li>{block:NoteCount}<a href="{permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
            </ul>
            {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Audio}
            {block:Video}
        <div class="entry">
            <div class="videopost">
                {Video-500}
                {block:Caption}{Caption}{/block:Caption}
            </div>
            <ul class="like-reblog">
                <li>{LikeButton size="15"}</li>
                <li>{ReblogButton size="15"}</li>
                <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
            </ul>
              {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Video}
    </div>
        {/block:Posts}
</div>

你应该试试这个，

希望对你有帮助。

关于html - 帖子用完了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32742122/

上一篇：html - 动画高度从底部到顶部

下一篇：javascript - 如何在评论框中插入一个新按钮？

相关文章：

php - 使用 MySQL 数据库中的值填充 HTML 下拉列表并使其成为 'selected'，而列表中还有其他选项

html - 防止移动浏览器显示 body 外的元素？

html - 将鼠标悬停在文本和叠加变换上

css - 如何将流体元素扩展到固定宽度模板之外

extjs - 在自定义 extjs 主题中包含现有的 CSS 文件

html - 如何将 border-bottom 应用于最后一个非空 <tr>？

html - CSS 文件未链接到 HTML 页面

javascript - 单击<a>标签时如何防止页面刷新？

javascript - TD 不响应 Outlook

java - 使用自定义 android 主题全息颜色

©2024 IT工具网  联系我们