如何并排放置我的tumblr帖子？

时间：2013-09-05 13:09:52

标签： html css positioning tumblr

我想帮助解决基于tumblr的投资组合网站上的一个简单问题。

我的网站是[www.ellekorhaliller.co.uk] [1]

我想更改布局，以便我可以并排放置我的帖子。例如，我不希望只有一列帖子，而是希望有一排2个帖子，而另一排是两个帖子，等等。

我确信这是一个非常容易解决的事情，但如果有人能指出我需要改变的CSS的正确方向，我将不胜感激。

请参阅下面的代码。

的Elle。

<html>
<head>
    <title>Elle Korhaliller - Fashion Stylist</title
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>



<!--

 .d8888b.  888b     d888 8888888b.  888      
d88P  Y88b 8888b   d8888 888   Y88b 888      
Y88b.      88888b.d88888 888    888 888      
 "Y888b.   888Y88888P888 888   d88P 888      
    "Y88b. 888 Y888P 888 8888888P"  888      
      "888 888  Y8P  888 888        888      
Y88b  d88P 888   "   888 888        888      
 "Y8888P"  888       888 888        88888888 

Disassemble 3.0 Theme for Tumblr by Georgia Harris
www.smpldesign.co.uk

-->

<!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#ffffff"/>
        <meta name="color:Text" content="#000000"/>
        <meta name="color:Video Corner Fold" content="red">
        <meta name="font:Font" content="'BrownBold'">
        <meta name="if:Show Captions" content="0"/>
        <meta name="if:Uppercase Links" content="0">
        <meta name="if:Fade On Hover" content="0">
        <meta name="if:Show Tags on Index Page" content="0">

<style type="text/css">
body {
background-color:#ffffff;
font-family:'BrownBold', 'Muli', sans-serif;
color:#000000;
font-size:16px;
line-height:25px;
}

a { 
padding-bottom:2px;
color:#000000;
text-decoration:none;

}
img {
border: none;
border : 0;
outline:none;
    width: 500px;
    height: auto;

max-width: 50%

}
a img {
outline: none;
}
iframe#tumblr_controls {  
display:none;


}


#header {
    position: fixed;
    background-color: #ffffff;
    padding-bottom:1cm;

    z-index:5000;
    width:100%;
    top: 0px;
left:0px;
margin: 0px auto;
height: 40px;

}

#wrapper {
margin: 50px auto auto auto; 
width: 1000px;
max-width: 100%
height: auto;


}
#post {
padding:20px 0 0 0;
width:100% !important;

   position:relative !important;
   font-size:14px;

}
#post img {
    width: 50%;
    height: auto;



}
#post img:hover {



}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {

}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
top:20px;
right:20px;
z-index:5000;
}



.archive {
position:fixed;
top:20px;
left:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
bottom:20px;
right:20px;
z-index:5000;
}
#toTop {
width:100%;
text-align:center;
margin:auto;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}

#page-nav {
    z-index:5000; !important
position:fixed;
margin-left: auto;
    margin-right: auto;
    text-align:center;
    text-decoration: none !important ;
    padding: 30px;
}

.player {
background:#000;
width: 1000px;
max-width: 100%
height: auto;
}
ul.chat {
list-style-type:none;
width: 1000px;
max-width: 100%
height: auto;

}
#infscr-loading {
display:none !important;
}

.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;

}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff red red;
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}

.contentcolumn{
margin:auto;
width: 100%;

</style>



<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>


<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });
    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    }); 
});
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36376336-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div id="header">

<div class="title"><a href="/"><a style="border-bottom-style: solid; border-bottom-width: 2px">{Title}</u></a></div>
<div class="archive"><a href="http://www.ellekorhalillerweb.tumblr.com/information">Information</a></div>
<div class="follow">{block:PermalinkPage}{block:Posts} {/block:Posts}{/block:PermalinkPage}<a href="http://www.ellekorhalillerweb.tumblr.com/contact">Contact</a></div></div>


<div class="message"><a href="http://www.ellekorhalillerweb.tumblr.com">Editorial</a></div>
<div class="random"><a href="http://www.ellekorhalillercommercial.tumblr.com">Commercial</a></div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}

<div id="wrapper">
<div class="contentcolumn">
{block:Posts}
<div id="post" 

{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
> 

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

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

{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>&mdash; {Source}</p>
{/block:Source}
{/block:Quote}

{block:Photo}
{block:IndexPage}<a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}" border="0"align="center"/></div></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}
/*Could put a center here*/
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}

{block:Video}
{block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage}
<div id="video"> 
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}

{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}" align="center"></a>{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}

{block:Audio}
{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}

{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{/block:Date}{/block:PermalinkPage}

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

{block:NextPage}<div id="page-nav"><a href="{NextPage}">↓</a>{/block:NextPage}

</div>

</body>
</html>      



  [1]: http://www.ellekorhaliller.co.uk

1 个答案:

答案 0 :(得分：0)

假设您知道自己在使用HTML / CSS做什么，那么您应该阅读tumblr文档。

http://www.tumblr.com/docs/en/custom_themes

具体来说，您可以尝试使用{Block：Posts [1-5]}或{Block：Even} / {Block：Odd}来相应地划分您的帖子。

希望有所帮助......

相关问题
最新问题