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

如何将侧边栏放置在内容旁边？

发布于 2024-12-25 04:42:08 字数 22488 浏览 2 评论 0原文

我在 tumblr 上运行一个简单博客用 XHTML 制作。

现在，如您所见，它有一个位于浏览器中心的单列（800 像素宽）。因此，无论您如何缩放浏览器窗口，博客内容都会保持在中心。我现在想做的是在这个主栏的右侧添加一个小侧边栏。

现在，我已经成功地自己创建了一个侧边栏，但是如果您滚动到我的博客底部，您可以看到侧边栏位于内容下方而不是旁边。如何将其放在我的内容旁边？我必须说，我对编码和编辑 CSS 几乎一无所知，到目前为止我所做的一切都是通过自定义现有主题来完成的。所以我希望有人能帮助我！

抱歉，我对它进行了广泛的解释，我只是想让自己完全清楚，以便有人可以提供帮助。 可以肯定的是，我添加了一张经过 Photoshop 处理的屏幕截图，以便您可以看到我正在寻找的结果。

屏幕截图示例：

下面是代码：

注意：您可以在 #rightside 下找到侧边栏的放置（或 CSS），并在 

<!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" xml:lang="en" lang="en">

<head>


<!--
    "Quite Big" theme designed by

                                       |             |    |           
  _` |  _ \  _ \   __| _` |  _ \    _` | |   | __ \  |  / |  _ \ |   |
 (   |  __/ (   | |   (   |  __/   (   | |   | |   |   <  |  __/ |   |
\__, |\___|\___/ _|  \__, |\___|  \__,_|\__,_|_|  _|_|\_\_|\___|\__, |
|___/                |___/                                      ____/ 


    http://www.tumblr.com/theme/3531
  -->


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <meta name="color:Background" content="#ffffff"/>
  <meta name="color:Title" content="#000000"/>
  <meta name="color:Text" content="#202020"/>
  <meta name="color:Minor Text" content="#999999"/>
  <meta name="color:Line" content="#EEEEEE"/>
  <meta name="color:Link" content="#49D28D"/>
  <meta name="color:Hover Link" content="#3FB67A"/>
  <meta name="color:audio" content="#000000"/>
<meta name="color:TopLine" content="#eeeeee"/>
<meta name="color:BottomLine" content="#eeeeee"/>
<meta name="if:CenterAll" content="0"/>




<meta name="font:Heading" content="Futura"/>

<meta name="image:Header" content="0">

<meta name="if:Show notes on permalink pages" content="1">

<meta name="if:Show Album Art on Audio Posts" content="1" />
<meta name="if:Ask Enabled" content="0" />

  <meta name="font:Description" content="Georgia"/>
  <meta name="font:Body" content="Georgia"/>

<meta name="text:Disqus Shortname" content=""/>

  <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

  <link rel="shortcut icon" href="{Favicon}"/>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>

  <style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea, {margin:0;padding:0;}
html{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}

body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}

h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}

a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Hover Link};}



#header {color:{color:Minor Text}; position:relative; margin:-49 auto; padding-top:25px; width:875px;}

#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:80px; line-height:65px; margin-bottom:15px; margin-top:-30px;
            letter-spacing:-.05em;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Hover Link};}
#description {font-family:{font:Description}; font-size:12px; text-align:center; line-height:16px; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
              text-decoration:none;}
#header li a:hover {background:none;}



#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}

#rightside {
    margin: 0px auto;
    position: relative;
    left: 750px;
    padding-top:0px;
    width:240px;}







#posts {background-color:{color:Background}; border-top:1px solid {color:TopLine}; 
        border-bottom:1px solid {color:BottomLine}; margin:0px; padding:0px; {block:IfCenterAll}text-align:center;{/block:IfCenterAll}font-size:14px;}


#posts .post {list-style:none; padding-bottom:10px; max-width:800px;
              clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}

#footer {margin:0 auto; max-width:800px; padding-bottom:30px;}
#pagination p {font-size:14px; min-width:150px; line-height:16px; margin:0 0 10px;
               white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
                   margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor Text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}

p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}

.meta {float:left; clear:left; width:65px; {block:IfCenterAll}width:800px{/block:IfCenterAll}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em;
         text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor Text}; font-style:italic; margin:0;
        width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}

h3 {font-size:16px; line-height:20px; padding-bottom:10px; font-weight:bold;}

.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}

blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:14px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
     overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor Text};}

ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}

abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}


.text, .caption {margin-bottom:20px;}
.post img, .post object, .post embed {max-width:100%;}

.link-post h3 {padding:0; margin-bottom:15px;}

.photo-post .photo, .video-post .video {margin-bottom:20px; margin-top:20px; }

.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
  {float:right; margin:0 40px 20px 50px; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
  {letter-spacing:0;}
.short-quote .quote, .medium-quote .quote
  {font-size:14px; line-height:16px; margin:20px 40px 20px 0;}
.long-quote .quote {margin:20px;}

.audio-post .audio {height:27px; background: {color:audio}; 
    display: block; 
    margin-bottom: 5px; 
    padding: 0px;}


.audio-post .audio_player {width:auto;}

.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
  .chat-post .speaker6 .label, .chat-post .speaker8 .label
    {color:{color:Minor Text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {font-family:{font:Heading};}


.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}

.content.text-post img {
max-width: 100%;
}


.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterAll}margin-right:10px; margin-left:10px;{/block:IfCenterAll};}

.inst {
background-color: #49d28d;
}


.video embed, .video object, .video iframe {width:800px; height:450px;}


#comment {
  font-size: 14px;
  text-align: left;
  line-height: 18px;
  margin: 0px 0px 0px 0px;
}

#comment a {
  text-decoration: none;
  color: {color:Caption};
}

#comment a:hover {
  text-decoration: none;
  color: {color:Link Hover};
}

#dsq-content {
  background: rgba(0, 0, 0, .30);
  background: url('     ');
  padding: 5px 20px 20px 20px;
  margin-top: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
}





{block:PermalinkPage}



      p.answer_form_container { width: 512px; }

      ol.notes { width: 800px; list-style-type: none; margin:20px auto; padding: 0; }
        ol.notes li.note { background: #F7F7F7; margin: 0 0 0px 0; padding: 0 4px; }
        ol.notes a { color: {color:Links In Notes}; }
        ol.notes img.avatar { display: none; }
        ol.notes blockquote { margin: 0; }
          ol.notes blockquote a { text-decoration: none; }
    {/block:PermalinkPage}






a.install {
        width: 96px;
        height: 20px;
        background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
        display: block;
        position: absolute;
        top: 26px;
        right: 3px;
    }


a {
  outline: none;
}





{CustomCSS}
  </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/xz44nnc/zNHlmnd4b/jquery.killphotoset.js"></script>
<script>
$(function () {
   $(".html_photoset").killPhotoset({
   photoSize: 1280
  });
});
</script>


<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="http://iloveyourvideo.tumblr.com/tagged/"+formElm.number.value+"";
return false;
}
// -->
</script>

</head>
<body>




<div id="container">


<div id="header">
  <a href="/">
        {block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>



  {block:Description}<p id="description">
    {Description}
  </p>{/block:Description}

<p>
{block:IfCenterAll}<center>{/block:IfCenterAll}

{block:Pages} 

<a class="multi" href="{URL}">{Label}</a>

{/block:Pages}


{block:IfAskEnabled}
<a class="multi" href="/ask">{AskLabel}</a>
{block:IfAskEnabled}
{block:IfCenterAll}</center>{/block:IfCenterAll}</p>

</div>



<ol id="posts"><br>
{block:Posts}


<li class="post" id="post{PostID}">

    {block:Text}

 <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>

    <div class="content text-post">
      {block:Title}<h3><span>{Title}</span></h3>{/block:Title}

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

   {block:Photo}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
        {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
          <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
        {block:IndexPage}</a>{/block:IndexPage}
        {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}

      </div>



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


{block:Photoset}

        <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {Photoset-500}

      </div>



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



    {block:Quote}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>
    <div class="content quote-post {Length}-quote">
      <blockquote class="quote">{Quote}</blockquote>

      {block:Source}<div class="source">&mdash;&#8194;{Source}</div>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}

<div class="meta">

{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>
    <div class="content link-post">
      <h3 class="link"><a href="{URL}">{Name}</a></h3>

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

    {block:Chat}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>

    <div class="content chat-post">
      {block:Title}<h3>{Title}</h3>{/block:Title}

      <ol class="chat">
        {block:Lines}<li class="{Alt} speaker{UserNumber}">
          {block:Label}<span class="label">{Label}</span>{/block:Label}
          <span class="line">{Line}</span>
        </li>{/block:Lines}
      </ol>
    </div>
    {/block:Chat}



{block:Video}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br>
   <div class="content video-post">
      <div class="video">{Video-500}</div>
      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Video}




    {block:Audio}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>





{block:IfShowAlbumArtOnAudioPosts}
                            {block:AlbumArt}
                                <div class="album_art">
                                    <img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 5px"/>
                                </div>
                            {/block:AlbumArt}
                        {/block:IfShowAlbumArtOnAudioPosts}






    <div class="content audio-post">
      <div class="audio">
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script>
<span id="audio_player_{PostID}">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span>
<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
    var color = "FFF700";
    var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
    replaceIfFlash(9, "audio_player_{PostID}", player);
</script>
</div>
<p>plays: <span class="plays">{FormattedPlayCount}</span></p>


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

<div class="clear">&nbsp;</div>

  </li>

{/block:Posts}


{block:IfDisqusShortname}
    {block:Permalink}
    <div id="disqus">
    <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
    </div>
    {/block:Permalink}
    <script type="text/javascript">
    //<![CDATA[
    (function() {
        var links = document.getElementsByTagName('a');
        var query = '?';
        for(var i = 0; i < links.length; i++) {
        if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
        }
        }
        document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
    {/block:IfDisqusShortname}


</div> <!-- .box -->
      {/block:Posts}



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

    <div style="clear: both"></div>

    {block:PermalinkPage}
    {block:IfShowNotesOnPermalinkPages}
      {PostNotes}
    {/block:IfShowNotesOnPermalinkPages}
    {block:PermalinkPage}

    <div style="clear: both;"></div>


<div id="rightside">
<div class="widget">
</div>


<p><a href="http://iloveyourvideo.tumblr.com/">I Love Your Video | 2012</a></p> 

<p> <form onsubmit="return handleThis(this)">
<input type="text" name="number" />
<input type="submit" value="Search" />
</form> </p>

<p>Maybe some links
<a href="http://twitter.com/">twitter</a></br>
<a href="http://facebook.com/">facebook</a></br>
<a href="http://www.flickr.com/">flickr</a></br>
<a href="/">website</a></p>

<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpakhuis.dezwijger&amp;width=240&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:258px;" allowTransparency="true"></iframe></p>

<p>Advertisement</p>

<img src="http://i188.photobucket.com/albums/z152/dunkley2007/ad-2.png" border="0"</a>



</div>
</div>


</div><!--/rightside-->


</ol>

<div id="footer">

  <div id="pagination">
  {block:Pagination}
    <p class="back">&nbsp;{block:NextPage}
      <a href="{NextPage}">next</a> >>>
    {/block:NextPage}</p>
    <p class="forward">{block:PreviousPage}
     <<< <a href="{PreviousPage}">prev</a>
    {/block:PreviousPage}&nbsp;</p>

  {/block:Pagination}

  {block:PermalinkPagination}
    {block:PreviousPost}<p class="back">
      <a href="{PreviousPost}">next</a> >>>
    </p>{/block:PreviousPost}
    {block:NextPost}<p class="forward">
     <<< <a href="{NextPost}">prev</a>
    {/block:NextPost}</p>
  {/block:PermalinkPagination}

  {block:DayPagination}
    {block:PreviousDayPage}<p class="back">
      <a href="{PreviousDayPage}">next</a> >>>
    {/block:PreviousDayPage}</p>
    {block:NextDayPage}<p class="forward">
      <<< <a href="{NextDayPage}">prev</a>
    </p>{/block:NextDayPage}
  {/block:DayPagination}
  </div>



<br><br />

<center>
<a href="/archive">archive</a> // 
    <a href="/random">random post</a> //
    <a href="{RSS}">RSS</a> 
<br />
<font size="2"><i>powered by <a href="http://www.tumblr.com/">tumblr</a> - 
    <a href="http://www.tumblr.com/theme/9601">Quite Big theme</a> by <a href="http://georgedunkley.tumblr.com/">George Dunkley</a></i></font></center>



</div>










</div>


</div>




</body>
</html>
原文

I run a simple blog on tumblr made in XHTML.

Now as you can see it has a single column (800px wide) that is centered in the browser. So the blog content stays in the center no matter how you scale the browser window. What I would like to do now is add a small sidebar to the right of this main column.

Now, I have managed to create a sidebar myself but if you scroll to the bottom of my blog, you can see that the sidebar is below the content and not next to it. How to I get it next to my content? I must say, I know next to nothing about coding and editing the CSS, everything I made so far is by customizing an existing theme. So I hope someone can help me out!

Sorry for extensively explaining it, I just want to make myself perfectly clear so someone can help.
And to be sure, I've added a photoshopped screenshot so you can see the result that I'm looking for.

Example screenshot:

Below is the code:

NOTE: you can find the placing (or CSS) of the sidebar under #rightside and the actual content of the sidebar at the bottom of the code under <div id="rightside">

<!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" xml:lang="en" lang="en">

<head>


<!--
    "Quite Big" theme designed by

                                       |             |    |           
  _` |  _ \  _ \   __| _` |  _ \    _` | |   | __ \  |  / |  _ \ |   |
 (   |  __/ (   | |   (   |  __/   (   | |   | |   |   <  |  __/ |   |
\__, |\___|\___/ _|  \__, |\___|  \__,_|\__,_|_|  _|_|\_\_|\___|\__, |
|___/                |___/                                      ____/ 


    http://www.tumblr.com/theme/3531
  -->


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <meta name="color:Background" content="#ffffff"/>
  <meta name="color:Title" content="#000000"/>
  <meta name="color:Text" content="#202020"/>
  <meta name="color:Minor Text" content="#999999"/>
  <meta name="color:Line" content="#EEEEEE"/>
  <meta name="color:Link" content="#49D28D"/>
  <meta name="color:Hover Link" content="#3FB67A"/>
  <meta name="color:audio" content="#000000"/>
<meta name="color:TopLine" content="#eeeeee"/>
<meta name="color:BottomLine" content="#eeeeee"/>
<meta name="if:CenterAll" content="0"/>




<meta name="font:Heading" content="Futura"/>

<meta name="image:Header" content="0">

<meta name="if:Show notes on permalink pages" content="1">

<meta name="if:Show Album Art on Audio Posts" content="1" />
<meta name="if:Ask Enabled" content="0" />

  <meta name="font:Description" content="Georgia"/>
  <meta name="font:Body" content="Georgia"/>

<meta name="text:Disqus Shortname" content=""/>

  <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

  <link rel="shortcut icon" href="{Favicon}"/>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>

  <style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea, {margin:0;padding:0;}
html{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}

body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}

h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}

a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Hover Link};}



#header {color:{color:Minor Text}; position:relative; margin:-49 auto; padding-top:25px; width:875px;}

#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:80px; line-height:65px; margin-bottom:15px; margin-top:-30px;
            letter-spacing:-.05em;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Hover Link};}
#description {font-family:{font:Description}; font-size:12px; text-align:center; line-height:16px; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
              text-decoration:none;}
#header li a:hover {background:none;}



#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}

#rightside {
    margin: 0px auto;
    position: relative;
    left: 750px;
    padding-top:0px;
    width:240px;}







#posts {background-color:{color:Background}; border-top:1px solid {color:TopLine}; 
        border-bottom:1px solid {color:BottomLine}; margin:0px; padding:0px; {block:IfCenterAll}text-align:center;{/block:IfCenterAll}font-size:14px;}


#posts .post {list-style:none; padding-bottom:10px; max-width:800px;
              clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}

#footer {margin:0 auto; max-width:800px; padding-bottom:30px;}
#pagination p {font-size:14px; min-width:150px; line-height:16px; margin:0 0 10px;
               white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
                   margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor Text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}

p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}

.meta {float:left; clear:left; width:65px; {block:IfCenterAll}width:800px{/block:IfCenterAll}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em;
         text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor Text}; font-style:italic; margin:0;
        width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}

h3 {font-size:16px; line-height:20px; padding-bottom:10px; font-weight:bold;}

.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}

blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:14px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
     overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor Text};}

ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}

abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}


.text, .caption {margin-bottom:20px;}
.post img, .post object, .post embed {max-width:100%;}

.link-post h3 {padding:0; margin-bottom:15px;}

.photo-post .photo, .video-post .video {margin-bottom:20px; margin-top:20px; }

.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
  {float:right; margin:0 40px 20px 50px; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
  {letter-spacing:0;}
.short-quote .quote, .medium-quote .quote
  {font-size:14px; line-height:16px; margin:20px 40px 20px 0;}
.long-quote .quote {margin:20px;}

.audio-post .audio {height:27px; background: {color:audio}; 
    display: block; 
    margin-bottom: 5px; 
    padding: 0px;}


.audio-post .audio_player {width:auto;}

.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
  .chat-post .speaker6 .label, .chat-post .speaker8 .label
    {color:{color:Minor Text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {font-family:{font:Heading};}


.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}

.content.text-post img {
max-width: 100%;
}


.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterAll}margin-right:10px; margin-left:10px;{/block:IfCenterAll};}

.inst {
background-color: #49d28d;
}


.video embed, .video object, .video iframe {width:800px; height:450px;}


#comment {
  font-size: 14px;
  text-align: left;
  line-height: 18px;
  margin: 0px 0px 0px 0px;
}

#comment a {
  text-decoration: none;
  color: {color:Caption};
}

#comment a:hover {
  text-decoration: none;
  color: {color:Link Hover};
}

#dsq-content {
  background: rgba(0, 0, 0, .30);
  background: url('     ');
  padding: 5px 20px 20px 20px;
  margin-top: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
}





{block:PermalinkPage}



      p.answer_form_container { width: 512px; }

      ol.notes { width: 800px; list-style-type: none; margin:20px auto; padding: 0; }
        ol.notes li.note { background: #F7F7F7; margin: 0 0 0px 0; padding: 0 4px; }
        ol.notes a { color: {color:Links In Notes}; }
        ol.notes img.avatar { display: none; }
        ol.notes blockquote { margin: 0; }
          ol.notes blockquote a { text-decoration: none; }
    {/block:PermalinkPage}






a.install {
        width: 96px;
        height: 20px;
        background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
        display: block;
        position: absolute;
        top: 26px;
        right: 3px;
    }


a {
  outline: none;
}





{CustomCSS}
  </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/xz44nnc/zNHlmnd4b/jquery.killphotoset.js"></script>
<script>
$(function () {
   $(".html_photoset").killPhotoset({
   photoSize: 1280
  });
});
</script>


<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="http://iloveyourvideo.tumblr.com/tagged/"+formElm.number.value+"";
return false;
}
// -->
</script>

</head>
<body>




<div id="container">


<div id="header">
  <a href="/">
        {block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>



  {block:Description}<p id="description">
    {Description}
  </p>{/block:Description}

<p>
{block:IfCenterAll}<center>{/block:IfCenterAll}

{block:Pages} 

<a class="multi" href="{URL}">{Label}</a>

{/block:Pages}


{block:IfAskEnabled}
<a class="multi" href="/ask">{AskLabel}</a>
{block:IfAskEnabled}
{block:IfCenterAll}</center>{/block:IfCenterAll}</p>

</div>



<ol id="posts"><br>
{block:Posts}


<li class="post" id="post{PostID}">

    {block:Text}

 <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>

    <div class="content text-post">
      {block:Title}<h3><span>{Title}</span></h3>{/block:Title}

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

   {block:Photo}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
        {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
          <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
        {block:IndexPage}</a>{/block:IndexPage}
        {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}

      </div>



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


{block:Photoset}

        <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {Photoset-500}

      </div>



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



    {block:Quote}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>
    <div class="content quote-post {Length}-quote">
      <blockquote class="quote">{Quote}</blockquote>

      {block:Source}<div class="source">— {Source}</div>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}

<div class="meta">

{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>
    <div class="content link-post">
      <h3 class="link"><a href="{URL}">{Name}</a></h3>

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

    {block:Chat}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>

    <div class="content chat-post">
      {block:Title}<h3>{Title}</h3>{/block:Title}

      <ol class="chat">
        {block:Lines}<li class="{Alt} speaker{UserNumber}">
          {block:Label}<span class="label">{Label}</span>{/block:Label}
          <span class="line">{Line}</span>
        </li>{/block:Lines}
      </ol>
    </div>
    {/block:Chat}



{block:Video}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br>
   <div class="content video-post">
      <div class="video">{Video-500}</div>
      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Video}




    {block:Audio}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>





{block:IfShowAlbumArtOnAudioPosts}
                            {block:AlbumArt}
                                <div class="album_art">
                                    <img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 5px"/>
                                </div>
                            {/block:AlbumArt}
                        {/block:IfShowAlbumArtOnAudioPosts}






    <div class="content audio-post">
      <div class="audio">
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script>
<span id="audio_player_{PostID}">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span>
<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
    var color = "FFF700";
    var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
    replaceIfFlash(9, "audio_player_{PostID}", player);
</script>
</div>
<p>plays: <span class="plays">{FormattedPlayCount}</span></p>


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

<div class="clear"> </div>

  </li>

{/block:Posts}


{block:IfDisqusShortname}
    {block:Permalink}
    <div id="disqus">
    <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
    </div>
    {/block:Permalink}
    <script type="text/javascript">
    //<![CDATA[
    (function() {
        var links = document.getElementsByTagName('a');
        var query = '?';
        for(var i = 0; i < links.length; i++) {
        if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
        }
        }
        document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
    {/block:IfDisqusShortname}


</div> <!-- .box -->
      {/block:Posts}



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

    <div style="clear: both"></div>

    {block:PermalinkPage}
    {block:IfShowNotesOnPermalinkPages}
      {PostNotes}
    {/block:IfShowNotesOnPermalinkPages}
    {block:PermalinkPage}

    <div style="clear: both;"></div>


<div id="rightside">
<div class="widget">
</div>


<p><a href="http://iloveyourvideo.tumblr.com/">I Love Your Video | 2012</a></p> 

<p> <form onsubmit="return handleThis(this)">
<input type="text" name="number" />
<input type="submit" value="Search" />
</form> </p>

<p>Maybe some links
<a href="http://twitter.com/">twitter</a></br>
<a href="http://facebook.com/">facebook</a></br>
<a href="http://www.flickr.com/">flickr</a></br>
<a href="/">website</a></p>

<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpakhuis.dezwijger&width=240&height=258&colorscheme=light&show_faces=true&border_color=white&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:258px;" allowTransparency="true"></iframe></p>

<p>Advertisement</p>

<img src="http://i188.photobucket.com/albums/z152/dunkley2007/ad-2.png" border="0"</a>



</div>
</div>


</div><!--/rightside-->


</ol>

<div id="footer">

  <div id="pagination">
  {block:Pagination}
    <p class="back"> {block:NextPage}
      <a href="{NextPage}">next</a> >>>
    {/block:NextPage}</p>
    <p class="forward">{block:PreviousPage}
     <<< <a href="{PreviousPage}">prev</a>
    {/block:PreviousPage} </p>

  {/block:Pagination}

  {block:PermalinkPagination}
    {block:PreviousPost}<p class="back">
      <a href="{PreviousPost}">next</a> >>>
    </p>{/block:PreviousPost}
    {block:NextPost}<p class="forward">
     <<< <a href="{NextPost}">prev</a>
    {/block:NextPost}</p>
  {/block:PermalinkPagination}

  {block:DayPagination}
    {block:PreviousDayPage}<p class="back">
      <a href="{PreviousDayPage}">next</a> >>>
    {/block:PreviousDayPage}</p>
    {block:NextDayPage}<p class="forward">
      <<< <a href="{NextDayPage}">prev</a>
    </p>{/block:NextDayPage}
  {/block:DayPagination}
  </div>



<br><br />

<center>
<a href="/archive">archive</a> // 
    <a href="/random">random post</a> //
    <a href="{RSS}">RSS</a> 
<br />
<font size="2"><i>powered by <a href="http://www.tumblr.com/">tumblr</a> - 
    <a href="http://www.tumblr.com/theme/9601">Quite Big theme</a> by <a href="http://georgedunkley.tumblr.com/">George Dunkley</a></i></font></center>



</div>










</div>


</div>




</body>
</html>

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

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

发布评论

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

评论（3）

忆梦 2025-01-01 04:42:08

使用 CSS float 属性应该会有所帮助。例如使用右侧。

#rightside 
{
margin: 0px auto;
position: relative;
left: 750px;
padding-top:0px;
width:240px;
float:right;
}

Using the CSS float property should help. For example using rightside.

#rightside 
{
margin: 0px auto;
position: relative;
left: 750px;
padding-top:0px;
width:240px;
float:right;
}
回复 原文
年少掌心 2025-01-01 04:42:08

使用浮动：左；对于内容部分...

#leftside 
{
    float: left;
}

use float: left; for the content div...

#leftside 
{
    float: left;
}
回复 原文
最后的乘客 2025-01-01 04:42:08

我尝试过：

{
margin: 0px auto;  
position: relative;
left: 750px; 
padding-top:0px;
width:240px;
float:right;
}

正在测试一个盒子，它似乎只是粘在右侧内容区域的底部。尝试将底部设置为 1000px，这确实将其向上移动，但是当我放大或缩小时，它会到处移动。不确定这是否与我体内的 CSS 规则有关，但如果你能帮助我，那就太好了！我无法向您展示它的样子，但您可以通过电子邮件与我联系。谢谢！

I tried:

{
margin: 0px auto;  
position: relative;
left: 750px; 
padding-top:0px;
width:240px;
float:right;
}

Was testing a box and it seems to just stick at the bottom of the content area to the right. Tried setting bottom to 1000px which did move it up but when I zoom in or out it moves all over the place. Not sure if it's something to do with the CSS rules in my body but if you could help me that would be great! I can't show you what it looks like but you can contact me via email. Thanks!

回复 原文
~没有更多了~

关于作者

镜花水月

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

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

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

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