在tumblr主题中支持540px和500px

时间：2016-04-16 13:54:30

标签： tumblr tumblr-themes

我试图让我的tumblr主题支持原始大小的500px和540px帖子（不需要放大图片缩小图片）。我发现并遵循了一个使这成为可能的指南，但问题是由大于268像素的照片组成的照片不再是并排出现，而是在彼此之上。

大多数照片已经排成一行并排放置了两张照片或一排放了3张照片，有些甚至每排有1张照片 - 是否可以保留原来的排列？我的问题主要是2张照片，3张照片太大而且因此在高分辨率下一个接一个地排列 - 是否有可能对此做些什么？是否有可能使照片中的这些大图片更小并使它们并排显示？

代码如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta name="color:Background Color" content="#edebe9" />
<meta name="image:Background" content=""/>
<meta name="color:Post Background" content="#ffffff" />
<meta name="color:Header Title Color" content="#ffffff" />
<meta name="color:Main Color" content="#7b7978" />
<meta name="color:Accent" content="#ffbabf">

<meta name="image:Header" content="" />
<meta name="image:Sidebar" content="" />

<meta name="text:Header Title" content="" />
<meta name="text:Link 1 Title" content="refresh" />
<meta name="text:Link 1 Url" content="/" />
<meta name="text:Link 2 Title" content="message" />
<meta name="text:Link 2 Url" content="/ask" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 3 Url" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 4 Url" content="" />
<meta name="text:Link 5 Title" content="" />
<meta name="text:Link 5 Url" content="" />
<meta name="text:Link 6 Title" content="" />
<meta name="text:Link 6 Url" content="" />

<meta name="text:Sidebar Link 1 Title" content="" />
<meta name="text:Sidebar Link 1 Url" content="" />
<meta name="text:Sidebar Link 2 Title" content="" />
<meta name="text:Sidebar Link 2 Url" content="" />
<meta name="text:Sidebar Link 3 Title" content="" />
<meta name="text:Sidebar Link 3 Url" content="" />
<meta name="text:Sidebar Link 4 Title" content="" />
<meta name="text:Sidebar Link 4 Url" content="" />

<meta name="if:Shows Sidebar Links" content="1" />


<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<!-- tooltips -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed:300
}
);
});
})(jQuery);
</script>

<!-- font -->

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Montserrat:400,700:latin', 'Open+Sans:400,300,600,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>


<style type="text/css">

/*-- Font--*/

@font-face {
font-family:icons;
src:url('https://dl.dropboxusercontent.com/s/sag7r4mkfdw7jcn/theme51.ttf');
}

/*-- Basic --*/

html, body {
font-family: 'Open Sans', sans-serif;
background-color:{color:Background Color};
background-image:url('http://oi64.tinypic.com/rkylaf.jpg');
margin:0px;
padding:0px;
    background-attachment:fixed;
    background-repeat:no-repeat;
margin-left:0px;
margin-top:0px;
overflow-x:hidden;
background-attachment:fixed;
}

}

a{
color:{color:Accent};
text-decoration:none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a:hover, a:active{
color:{color:Main Color};
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#s-m-t-tooltip{
position:absolute;
max-width:150px;
z-index:999999999999;
margin-top:5px;
margin-left:10px;
display:block;
padding:5px 8px;
background:{color:Main Color};
font-size:8px;
color:{color:Background Color};
letter-spacing:1px;
text-transform:uppercase;
}

::-webkit-scrollbar-thumb {
width:9px;
border:2px solid {color:Background Color};
background-color:{color:Accent};
}

::-webkit-scrollbar {
width:9px;
border:4px solid {color:Background Color};
background-color:{color:Accent};
}

::-moz-selection { /* Code for Firefox */
color:#fff;
background-color:{color:Accent};
}

::selection {
color:#fff;
background-color:{color:Accent};
}

figure{
margin-top:10px;
max-width:100%;
height:auto;
}

/*-- Tumblr Controls --*/

.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
white-space:nowrap;
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
opacity:0.2;
}





/*-- Header --*/

/*-- Topbar --*/

.header{
left:calc(50% - 360px);
width:730px;
top:0px;
position:absolute;
}

.sticky {
position:fixed;
top:0px;
z-index:9999;
height:40px;
}

#topbar{
text-align:center;
background-color:{color:Post Background};
box-shadow:1px 2px 1px rgba(0,0,0,0.03);
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
}

#topbar a{
display:inline-block;
font-size:8px;
font-family: 'Montserrat', sans-serif;
letter-spacing:2px;
text-transform:uppercase;
height:37px;
line-height:40px;
color:{color:Main Color};
padding:0px 8px 0px 10px;
margin:0px 5px;
border-bottom:3px solid transparent;
}

#topbar a:hover{
border-bottom:3px solid {color:Accent};
color:{color:Accent};
}


/*-- Sidebar --*/

#sidebar{
margin-top:20px;
margin-bottom:50px;
width:150px;
text-align:left;
overflow:hidden;
background:{color:Post Background};
box-shadow:1px 2px 1px rgba(0,0,0,0.03);
border-radius:3px;
}

#sidebarimg img{
width:150px;
}

#desc{
font-weight:400;
text-align:justify;
width:110px;
padding:15px 20px;
line-height:150%;
font-size:9px;
color:{color:Main Color};
letter-spacing:0.5px;
}

#navi{
border-top:1px solid {color:Background Color};
}

#navi a{
font-family: 'Montserrat', sans-serif;
display:block;
width:110px;
padding:15px 20px;
text-align:left;
color:{color:Main Color};
text-transform:uppercase;
font-size:7.5px;
letter-spacing:2px;
line-height:100%;
border-bottom:1px solid {color:Background Color};
}

#navi a:last-child{
border:none;
}

a.link1::before{
content: "\e900";
}

a.link2::before{
content: "\e901";
}

a.link3::before{
content: "\e902";
}

a.link4::before{
content: "\e903";
}

a.link1::before,
a.link2::before,
a.link3::before,
a.link4::before{
font-family:'icons';
font-size:12px;
float:left;
margin-right:10px;
color:{color:Accent};
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.link1:hover::before,
a.link2:hover::before,
a.link3:hover::before,
a.link4:hover::before{
color:#fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#navi a:hover{
color:#fff;
background-color:{color:Accent};
}


#pagination{
border-top:1px solid {color:Background Color};
width:110px;
padding:0px 20px;
text-align:center;
font-size:9px;
}

#pagination a{
display:inline-block;
padding:10px 5px 8px 5px;
width:5px;
font-size:8px;
color:{color:Main Color};
border-bottom:2px solid transparent;
}

#pagination a:hover{
border-bottom:2px solid {color:Accent};
}

.current_page{
color:{color:Main Color};
display:inline-block;
padding:10px 5px 8px 5px;
width:5px;
font-size:8px;
border-bottom:2px solid {color:Accent};
}

#pagination a.jump{
font-family:Helvetica;
font-size:9px;
}


/*-- Posts --*/

#posts{
position:absolute;
top:30px;
left:calc(50% - 191px);
width:540px;
padding-bottom:50px;
}

#post{
font-weight:400;
font-size:9.5px;
width:550px;
padding:6px;
background-color:{color:Post Background};
color:{color:Main Color};
text-align:justify;
line-height:150%;
margin-top:30px;
letter-spacing:0.5px;
overflow:hidden;
box-shadow:1px 2px 1px rgba(0,0,0,0.03);
border-radius:3px;
}



/* BASIC */

#post img{
max-width:100%;
padding: 1.5px 1.5px 1.5px 1.5px;
}

#post a{
color:{color:Accent};
}

#post a:hover{
color:{color:Main Color};
}

.posttitle{
font-family: 'Montserrat', sans-serif;
font-weight:400;
font-size:14px;
letter-spacing:0px;
width:540px;
text-align:justify;
margin:0px 0px 10px 0px;
color:{color:Main Color};
}

blockquote{
width:calc(100% - 23px);
max-width:calc(100% - 23px);
margin-left:10px;
padding-left:10px;
border-left:2px solid {color:Accent};
}

p{
margin-top:3px;
}

ol {
margin-left:-15px;
}

ul {
list-style-type:disc;
margin-left:-15px;
}


/* LINKS */

.link-button {
background:#f2f2f2;
word-break:break-word;
overflow:hidden;
display:block;
position:relative;
text-decoration:none;
margin-bottom:10px;
}

.info-container {
padding:20px 20px 0;
overflow:hidden;
}

.publisher-container{
margin-top:-4px;
margin-bottom:17px;
display:block;
font-size:13px;
line-height:16px;
font-weight:700;
word-break:break-all;
position:absolute;
top:20px;
left:20px;
right:20px;
}

.publisher-container .publisher{
line-height:16px;
font-size:8px;
font-weight:500;
color:#fff;
text-shadow:1px 1px 0px rgba(0,0,0,0.1);
text-transform:uppercase;
letter-spacing:2px;
display:inline-block;
margin:0px;
}

.publisher-container .publisher:before{
font-size:14px;
float:left;
margin-right:5px;
font-family:'icons';
content:'\e908';
}

.info-container{
padding:20px 20px 0;
overflow:hidden;
}

.info-container .title{
margin-top:-5px;
margin-bottom:14px;
display:block;
font-family: 'Montserrat', sans-serif;
font-size:14px;
letter-spacing:0px;
line-height:130%;
color:{color:Accent};
}

.info-container .title:after{
padding-left:5px;
white-space:nowrap;
display:inline;
vertical-align:middle;
font-family:'icons';
content: "\e907";
}

.info-container .excerpt {
margin-top:-5px;
margin-bottom:14px;
display:block;
font-size:10px;
line-height:130%;
color:{color:Main Color};
}

/* QUOTES */

.quotes{
font-family: 'Montserrat', sans-serif;
font-weight:400;
font-size:14px;
letter-spacing:0px;
letter-spacing:0px;
width:540px;
line-height:130%;
color:{color:Main Color};
}

.quotes:before{
font-family:'icons';
content:'\e905';
margin-right:8px;
}

.quotes:after{
font-family:'icons';
content:'\e906';
margin-left:8px;
}

/* ASKS */

.asker{
font-size:7px;
text-transform:uppercase;
text-align:left;
line-height:100%;
color:{color:Main Color};
letter-spacing:2px;
}

.asker span{
color:{color:Main Color};
font-family: 'Montserrat', sans-serif;
font-weight:400;
text-transform:lowercase;
font-size:12px;
line-height:130%;
letter-spacing:0px;
}

.asker a{
color:{color:Main Color};
font-family: 'Montserrat', sans-serif;
font-weight:400;
text-transform:lowercase;
font-size:12px;
line-height:130%;
letter-spacing:0px;
}

.asker a:hover{
color:{color:Accent};
}

.askimg img{
width:25px;
height:25px;
margin-right:10px;
border-radius:50%;
float:left;
}

.question{
width:470px;
margin-left:12px;
margin-bottom:10px;
padding:20px 0px 10px 20px;
border-left:1px solid {color:Accent};
margin-top:-5px;
}

/* CHAT */

ul.chat, .chat ol, .chat li .chat li{
list-style:none;
line-height:180%;
margin-left:-35px;
}

/* POST NOTES */

#postnotes{
width:540px;
padding:20px;
color:{color:Main Color};
background:{color:Post Background};
font-size:8px;
text-align:justify;
line-height:150%;
margin-top:20px;
letter-spacing:1px;
text-transform:uppercase;
box-shadow:1px 2px 1px rgba(0,0,0,0.03);
border-radius:3px;
}

ol.notes {
padding:0px;
margin:25px 0px;
list-style-type:none;
border-bottom:solid 1px {color:Background Color};
}

ol.notes li.note {
border-top:solid 1px {color:Background Color};
padding:10px;
}

ol.notes li.note img.avatar {
vertical-align:-4px;
margin-right:10px;
width:16px;
height:16px;
border-radius:50%;
}


/*-- Permalink --*/

#permalink{
width:540px;
text-align:left;
text-transform:uppercase;
font-size:8px;
line-height:100%;
border-bottom:solid 1px {color:Background Color};
color:{color:Post Background};
padding:0px 10px 13px 20px;
margin-top:5px;
margin-bottom:5px;
margin-left:-15px;
letter-spacing:1px;
}

#permalink a{
font-weight:300 !important;
color:{color:Main Color};
margin:0px 5px;
}

#permalink a:first-child{
margin-left:0px;
}

#permalink a:hover{
color:{color:Accent};
}

#permalink a.notes{
font-family: 'Montserrat', sans-serif;
font-size:10px;
letter-spacing:1px;
}

.like_and_reblog_buttons{
list-style:none;
margin-top:-13px;
}

.like_and_reblog_buttons li{
float:right;
margin:0px;
margin-left:10px;
height:20px;
cursor:pointer !important;
}

#tags{
width:540px;
text-align:right;
line-height:100%;
border-top:solid 1px {color:Background Color};
color:{color:Post Background};
padding:10px 10px 0px 10px;
margin-top:20px;
margin-left:-20px;
letter-spacing:0.5px;
line-height:150%;
font-weight:400 !important;
font-size:8px;
}

#tags a{
display:inline-block;
color:{color:Main Color};
margin-left:10px;
opacity:0.5;
}

#tags a:hover{
color:{color:Accent};
opacity:1;
}

#tags a:before {
font-family:'icons';
font-size:7px;
content: "\e904";
margin-right:5px;
float:left;
}




/*------» do noт reмove «------*/

#credit {
font-family:Helvetica;
font-weight:300;
font-size:12px;
position:fixed;
bottom:10px;
right:10px;
z-index:99999;
}

#credit a{
display:block;
color:#fff;
background:{color:Accent};
padding:5px;
line-height:97%;
height:10px;
width:10px;
overflow:hidden !important;
text-align:center;
}

#credit a:hover{
padding-right:90px;
text-decoration:none;
}

#thememaker{
margin-left:15px;
margin-top:-11px;
font-size:7px;
letter-spacing:3px;
}

/*------» тнαик уσυ «------*/



</style>

</head>

<body>


<!-- [[•------» do noт reмove «------•]] -->

<div id="credit">
<a href="http://roxiestheme.com" target:"_blank">©<div id="thememaker">ROXIESTHEME</div></a>
</div>

<!-- [[•------»   тнαик уσυ   «------•]] -->

<div id="header">
<div class="title"><h1>{text:Header Title}</h1></div>
</div>

<div class="header">

<div id="topbar">
{block:IfLink1Title}<a href="{text:Link 1 Url}">{text:Link 1 Title}</a>{/block:Iflink1Title}
{block:IfLink2Title}<a href="{text:Link 2 Url}">{text:Link 2 Title}</a>{/block:Iflink2Title}
{block:IfLink3Title}<a href="{text:Link 3 Url}">{text:Link 3 Title}</a>{/block:Iflink3Title}
{block:IfLink4Title}<a href="{text:Link 4 Url}">{text:Link 4 Title}</a>{/block:Iflink4Title}
{block:IfLink5Title}<a href="{text:Link 5 Url}">{text:Link 5 Title}</a>{/block:Iflink5Title}
{block:IfLink6Title}<a href="{text:Link 6 Url}">{text:Link 6 Title}</a>{/block:Iflink6Title}
</div><!-- topbar -->

<div id="sidebar">

<div id="sidebarimg"><img src="{image:Sidebar}"></div>

<div id="desc">{description}</div>

{block:IfShowsSidebarLinks}
<div id="navi">
{block:IfSidebarLink1Title}<a href="{text:Sidebar Link 1 Url}" class="link1">{text:Sidebar Link 1 Title}</a>{/block:IfSidebarLink1Title}
{block:IfSidebarLink2Title}<a href="{text:Sidebar Link 2 Url}" class="link2">{text:Sidebar Link 2 Title}</a>{/block:IfSidebarLink2Title}
{block:IfSidebarLink3Title}<a href="{text:Sidebar Link 3 Url}" class="link3">{text:Sidebar Link 3 Title}</a>{/block:IfSidebarLink3Title}
{block:IfSidebarLink4Title}<a href="{text:Sidebar Link 4 Url}" class="link4">{text:Sidebar Link 4 Title}</a>{/block:IfSidebarLink4Title}
</div>
{/block:IfShowsSidebarLinks}

{block:Pagination}
<div id="pagination">
{block:PreviousPage}<a href="{PreviousPage}" class="jump">←</a>{/block:PreviousPage}
{block:JumpPagination length="3"}{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump">→</a>{/block:NextPage}
</div>
{/block:Pagination}

</div><!-- sidebar -->

</div><!-- class=header-->

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

<div id="posts">

{block:Posts}

<div id="post">

{block:Date}
<div id="permalink">
{block:NoteCount}
<a class="notes" href="{Permalink}">{NoteCount}</a>
{/block:NoteCount}
<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">{ShortMonth} {DayOfMonthWithZero} {Year}</a>
{block:RebloggedFrom}<a href="{ReblogParentURL}" target="_blank" title="{ReblogParentName}">via</a>/<a href="{ReblogRootURL}" target="_blank" title="{ReblogRootName}">src</a>{/block:RebloggedFrom}
<ul class="like_and_reblog_buttons">
<li>{LikeButton size="13"}</li>
<li>{ReblogButton size="13"}</li>
</ul>
</div>
{/block:Date}


{block:Text}
{block:Title}<div class="posttitle">{Title}</div>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<a href="{Url}" target="_blank" class="link-button">
{block:Thumbnail}<div class="thumbnail" style="width:540px;height:auto;background-image:url('{Thumbnail}');"></div>{/block:Thumbnail}
<div class="info-container">
{block:Host}<div class="publisher-container"><div class="publisher">{Host}</div></div>{/block:Host}
<div class="title">{Name}</div>
{block:Excerpt} <div class="excerpt">{Excerpt}</div>{/block:Excerpt}
</div></a>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Photo}
{LinkOpenTag}
<center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
{block:ReblogParentURL}
<!-- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ReblogParentURL}
{/block:Photo}

{block:Photoset}
<center>{block:Photos} <img src="{PhotoURL-HighRes}"max-width="540px"> {/block:Photos}</center>
{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quotes">{Quote}</div>
{block:Source}<br>
<div style="font-size:9px;">— {Source}</div>
{/block:Source}
<br>
{/block:Quote}

{block:Chat}
{block:Title}
<div class="posttitle">
{Title}
</div>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label" style="color:{color:Color One}"><b>{Label}</b></span>
{/block:Label}
&nbsp;{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
{AudioEmbed-500}
{block:caption}{Caption}{/block:caption}
{/block:Audio}

{block:Video}
<center>{Video-500}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:Answer}
<div class="askimg"><img src="{AskerPortraitURL-48}"></div>
<div class="asker">
<span>{Asker}</span>
<br>sent a message
</div>
<div class="question">{Question}</div>
{Answer}{/block:Answer}

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


</div><!-- post -->

{block:PostNotes}
<div id="postnotes">
{PostNotes}
</div>
{/block:PostNotes}

{/block:Posts}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
  /* questions? ask oddhour.tumblr.com */
     var updatePhotosetCss = "<style id='updatePhotosetStyle'> .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset { width: 540px; }</style>";
   function updatePhotoset() {

        $(".photoset").each( function (i, e) {
            if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0) 
                $(this.contentDocument).find("head").append(updatePhotosetCss);
            var photoset = $(this.contentDocument).find(".photoset");
            var photosetRows = photoset.find(".photoset_row");  
            photoset.find(".photoset_photo")
                .each(function () {
                    var hiResSrc = $(this).attr("href");
                    var img = $(this).find('img');
                    img.attr("src", hiResSrc );
                    img.attr("style", "");
                });
            photosetRows.attr("style", "").css("margin-bottom", "-5px");
            photoset.attr("style","");

            $(this).height($(this.contentDocument.body).height());
        });
    }

    updatePhotoset();

    var photosetTimer = setInterval(updatePhotoset, 1500);
    $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
</script>

</div><!-- posts -->

</body>





</html>

2 个答案:

答案 0 :(得分：0)

你应该在问题中写下 CSS 。请写下 #post 和 .postcontent

的CSS

答案 1 :(得分：0)

在您的代码中，它表示 #posts 的宽度为 540px 。其中包含 #post 。您的 #post 的宽度 550px 。因此，如果要连续排列2个或3个帖子，则必须增加#posts的宽度并减小#post的宽度。 这个概念很简单。如果 #posts 的宽度为100％且 #post 的宽度为50％，则会连续显示2个帖子。 假设您要连续发布2个帖子。然后... 

#posts{
width:540px;  /*in your code it is 540px*/
}
#post{
width:250px;  /*in your code it is 550px, change it to 250px*/
display:inline-block;
}

如果您想要this这样的主题，可以与我联系。另请在评论中发送您博客的链接。

相关问题
最新问题