如何在兩個Div之間創建垂直線Tumblr

這個主題有點亂，我正在修復它。我想在左欄和右欄之間插入一條2px淺灰色垂直線。這樣做有困難嗎？請和謝謝！如何在兩個Div之間創建垂直線Tumblr
<!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 profile="http://gmpg.org/xfn/11"> 
     <title>{Title}{block:SearchPage} &raquo; Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary} &raquo; {PostSummary}{/block:PostSummary}</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     {block:Description} 
      <meta name="description" content="{MetaDescription}" /> 
     {/block:Description} 
    <meta name="author" content="{PostAuthorName}"> 
    <meta name="if:Ask Enabled" content="1"> 
    <meta name="if:Show Twitter" content="1" /> 
    <meta name="text:Twitter Username" content=""> 
    <meta name="if:Show Instagram" content="1"> 
    <meta name="text:Instagram ID" content=""> 
    <meta name="if:Show Sidebar1" content="1"> 
    <meta name="text:Header1" content=""> 
    <meta name="text:Content1" content=""> 

     <link rel="shortcut icon" href="{Favicon}"> 
     <link rel="alternate" type="application/rss+xml" href="{RSS}"> 
     <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'> 

<style type="text/css"> 
body{ 
font-family:sans-serif; 
text-align:center; 
} 

#wrap{ 
color:#555; 
margin: 0 auto 0; 
background:none; 
text-align:center;width:950px; 
} 

.clear{ 
clear:both; 
} 

a{ 
color:007E8B; 
text-decoration:none; 
} 

a:hover{ 
color:#333; 
} 


/** HEADER **/ 
#header{ 
width:950px; 
} 

#header .moustache{ 
background:url('http://www.fogrhg.org/images/Banner-front-weepingcherry_790x150.png') top center no-repeat; 
height:155px 
} 

/** HEADER NAV **/ 
#header #nav{ 
background:#ffffff; 
font-family: 'Playfair Display', serif; 
font-style:italic; 
padding:2px 0; 
text-transform:uppercase; 
} 

#header #nav a{ 
color:#ffffff; 
padding:0 38px; 
text-decoration:none; 
} 

#header #nav a:hover{ 
color:#fb5d68; 
} 



/** SIDEBAR **/ 
#sidebar{ 
padding:10px 8px; 
text-align:center; 
font-size:20px; 
width:250px; 
float:right; 
} 


#sidebar h3{ 
color:#333; 
font-weight:normal; 
font-family: 'Roboto Condensed', sans-serif; 
text-align:left; 
text-transform:none; 
border-bottom:2px solid #555; 
} 

/** PROFILE **/ 
#sidebar .profile{ 
font-style:none; 
text-align:center; 
} 


/** SEARCH **/ 
#sidebar #search{ 
font-size:11px; 
font-family:sans-serif; 
text-align:center; 
} 

#sidebar #search .search,#sidebar #search .button{ 
font-size:10px; 
background:#fff; 
border:1px solid #555; 
text-transform:none; 
} 


/** TWITTER **/ 

#tweets .content{ 
text-transform:none; 
display: block; 
padding: 5px; 
border-bottom: 1px solid #e1e1e1; 
} 


#tweets .content:hover { 
background: #fafafa; 
} 

#tweets a { 
text-decoration:none; 
color:#888; 
} 

/** CONTENT **/ 
#content{ 
padding:10px 8px; 
text-align:left; 
font-size:11px; 
float:right; 
width:500px; 
} 

#content .h1{ 
margin:5px; 
text-align:center; 
text-transform:none; 
font-size:24px; 
font-weight:normal; 
font-family: 'Roboto Condensed', sans-serif; 
border-bottom:2px solid #555; 
width:auto; 
} 

/** META **/ 
#content .meta { 
color:#999; 
margin:10px 0; 
padding:2px; 
font-size:10px; 
text-transform:none; 
background:#fafafa; 
height:27px; 
overflow:hidden; 
} 

#content .meta a{ 
color:#555; 
text-decoration:none; 
} 

#content .meta .permalink{ 
float:right; 
} 

#content .meta .like{ 
float:right; 
padding-right:2px; 
} 

#content .meta .reblog{ 
float:right; 
padding-right:2px; 
} 

#content .quote{ 
font-family: 'Tangerine', cursive; 
font-size:32px; 
font-weight:bold; 
text-align:center; 
} 

/** Jump Pagination **/ 
#pagination { 
text-align: center; 
font-size: 10px; 
border-bottom: 0px; 
text-decoration:none; 
font-weight: bold; 
color: #333; 
}  

#pagination a { 
padding: 3px 7px 3px 7px; 
text-decoration:none; 
} 

#pagination .current_page { 
padding: 3px 7px 3px 7px; 
background-color: #252525; 
color: #FFF; 
} 

#pagination .jump_page:hover,#pagination .page:hover { 
color: #252525; 
} 

#pagination .jump_page,#pagination .page, #pagination .page:visited { 
color:#333 
} 


/** FOOTER **/ 
#footer{ 
background:#464646; 
color:#fafafa; 
font-family:sans-serif; 
font-size:22px; 
margin:15px 0 0; 
padding:100px; 
text-align:left; 
text-transform:uppercase; 
width:790px; 
} 

#footer a{ 
color:#fafafa; 
} 

#footer a:hover{ 
text-decoration:none; 
} 

</style> 
</head> 

<body> 
<div id="wrap"> 

    <!-- HEADER --> 
    <div id="header"> 

     <!-- Moustache --> 
     <div class="moustache"></div> 
     <!-- END --> 

     <!-- NAV --> 
     <div id="nav"> 

<table style="margin-left: -3px;" border="0" cellpadding="0" cellspacing="0" width="305"><tbody><tr><td height=" " width="38"> <a href="https://www.facebook.com/" target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/fb2_zps08962e30.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/fb1_zpseba2e1d1.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/fb1_zpseba2e1d1.jpg" alt="fb" /></a></td> 
<td height=" " width="38"><a href="https://twitter.com/T"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/twit2_zps9e5648a8.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/twit1_zps01831144.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/twit1_zps01831144.jpg" alt="twitter" /></a></td> 
<td height=" " width="38"><a href="http://pinterest.com/"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/pin2_zps3394daf8.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/pin1_zps189133b3.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/pin1_zps189133b3.jpg" alt="pin" /></a> 
</td> 
<td height=" " width="38"><a href="http://instagram.com/"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/ig2_zpse2504f42.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/ig1_zpsd2e0ab95.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/ig1_zpsd2e0ab95.jpg" alt="instagram" /></a></td> 
<td height=" " width="38"><a href="http://www.bloglovin.com/"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/blovin2_zpsd500a7d0.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/blovin1_zps5ab0d8a4.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/blovin1_zps5ab0d8a4.jpg" alt="bloglovin" /></a></td> 
</tr></tbody></table> 



    </div> 
    <!-- END --> 

    <!-- SIDEBAR --> 
    <div id="sidebar"> 

     <!-- DESCRIPTION --> 
     <div class="profile"> 

     </div> 

    <!-- Featured Post One --> 

    <h3>FEATURED POST</h3> 

    <a href="http://google.com" target=_blank><img src="http://www.29secrets.com/sites/all/files/s_-_gg_250x350.jpg" title="Google Day" width="250px"></a> 

    <!-- AD --> 

    <h3>SPONSOR</h3> 

    <a href="http://google.com" target=_blank><img src="http://hamovhotov.com/advertisement/wp-content/uploads/2007/03/250x250ad-in.gif" title="Google Day" width="250px"></a> 


    <!-- Featured Post Two --> 

    <h3>FEATURED POST</h3> 


    <a href="http://google.com" target=_blank><img src="http://blog.zap2it.com/frominsidethebox/assets_c/2010/12/nikita-shane-west-250x350-thumb-315xauto-19260.jpg" title="Google Day" width="250px"></a> 


<h3>TWITTER</h3> 
{block:Twitter} 
    <div id="twitter" style="display:none;height:200px; 
overflow:hidden;"> 
     <div id="tweets"></div> 
    </div> 

    <script type="text/javascript"> 
     function recent_tweets(data) { 
      for (i=0; i<data.length; i++) { 
       document.getElementById("tweets").innerHTML = 
        document.getElementById("tweets").innerHTML + 
        '<a href="http://twitter.com/{TwitterUsername}/status/' + 
        (data[i].id_str ? data[i].id_str : data[i].id) + 
        '"><div class="content">' + data[i].text + 
        '</div></a>'; 
      } 
      document.getElementById("twitter").style.display = 'block'; 
     } 
    </script> 
    <br><br> 
    <center><a href="https://twitter.com/{TwitterUsername}" class="twitter-follow-button" data-show-count="false">Follow @{TwitterUsername}</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center> 
{/block:Twitter} 




    <!-- INSTAGRAM --> 
    {block:ifShowInstagram} 
    <h3>INSTAGRAM</h3> 
    <iframe src="http://widget.stagram.com/in/{text:Instagram ID}/?s=63&w=3&h=3&b=0&p=5" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:200px; height: 200px" ></iframe> 
    {/block:IfShowInstagram} 


     <!-- SEARCH --> 
     <h3>SEARCH</h3> 
     <div id="search"> 
     <form action="/search" method="get"> 
      <input type="text" class="search" size="42" name="q" value="{SearchQuery}"/> 
     </form> 
     </div> 

     <!-- SIDEBAR 1 --> 
     {block:ifShowSidebar1} 
     <h3>{text:Header1}</h3> 
     {text:Content1} 
     {/block:ifShowSidebar1} 


     </div> 

    <!-- CONTENT --> 
    <div id="content"> 

{block:ContentSource} 

<!— {SourceURL}{block:SourceLogo}<img src=」{BlackLogoURL}」 

width=」{LogoWidth}」 height=」{LogoHeight}」 alt=」{SourceTitle}」 /> 

{/block:SourceLogo} 

{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} —> 

{/block:ContentSource}{block:ReblogParent}{/block:ReblogParent} 


      {block:Posts} 

     <!-- Text Post --> 
      {block:Text} 
      {block:Title}<div class="h1">{Title}</div>{/block:Title} 

      {Body} 
      {/block:Text} 
      {block:ContentSource} 


     <!-- End Text Post --> 

     <!-- Photo Post --> 
      {block:Photo} 
      <center><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></center> 
      {block:Caption}{Caption}{/block:Caption} 
      {/block:Photo} 
      {block:ContentSource} 

     <!-- End Photo Post --> 

     <!-- Quote Post --> 
      {block:Quote} 
      <div class="quote">{Quote}</div> 
      {/block:Quote} 
      {block:ContentSource} 


     <!-- End Quote Post --> 

     <!-- Link Post --> 
      {block:Link} 
      <h1><a href="{URL}" {Target}>{Name}</a></h1> 
      {block:Description}{Description}{/block:Description} 
      {/block:Link} 
      {block:ContentSource} 

     <!-- End Link Post --> 

     <!-- Chat Post --> 
      {block:Chat} 
      {block:Title}<h1>{Title}</h1>{/block:Title} 
      <br> 
      {block:Lines} 
      <div class="chat"><b>{block:Label}{Label}{/block:Label}</b> 
      {Line}</div>{/block:Lines} 
      {/block:Chat} 
      {block:ContentSource} 


     <!-- End Chat Post --> 

     <!-- Audio Post --> 
      {block:Audio} 

{block:AudioEmbed} 
{AudioEmbed-500} 
{/block:AudioEmbed} 

{AudioPlayerGrey} 
<br> 
      {Caption} 
{/block:PermalinkPage} 
      {/block:Audio} 
      {block:ContentSource} 


     <!-- End Audio Post --> 

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


     <!-- End Video Post --> 

     <!-- Tumblr Ask Post --> 

      {block:Answer} 

    <i>{Asker}: {Question}</i> 

    {answer} 
      {/block:Answer} 
      {block:ContentSource} 



     <!-- End Tumblr Ask Post --> 

<div class="meta"> 
    {block:IndexPage} 
    <div class="like"> 
    {LikeButton size="15"} 
    </div> 
    <div class="reblog"> 
    <a href="{ReblogURL}" target=_blank><img src="http://static.tumblr.com/l3yukm9/jOCmv0gjk/reblog.png" title="Reblog this post" width="15px"></a> 
    </div> 

        {block:date}<a href="{Permalink}">{TimeAgo}</a> {/block:date} {block:NoteCount} | <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} 
<br> 
{block:HasTags} 
Tags: {block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags} {/block:HasTags} 
</div> 
     {/block:IndexPage}   




{block:PermalinkPage} 
    <div class="like"> 
    {LikeButton size="15"} 
    </div> 
    <div class="reblog"> 
    {ReblogButton size="15"} 
    </div> 

{block:date}{TimeAgo}{/block:date} {block:NoteCount} | {NoteCountWithLabel}{/block:NoteCount} 
<br> 
{block:HasTags} 
Tags: {block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags} {/block:HasTags} 
</div> 
{/block:PermalinkPage} 


      {block:PostNotes} 
     {PostNotes} 
     {/block:PostNotes} 

        {/block:Posts} 

     <!-- PAGINATION --> 
    <div id="pagination"> 
{block:PreviousPage} <a href="{PreviousPage}" class="page">&larr;</a> {/block:PreviousPage} 

      {block:JumpPagination length="10"} 
       {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="page">&rarr;</a>{/block:NextPage} 

</div> 


    </div> 
    <!-- END --> 

    <!-- CLEAR --> 
    <div class="clear"></div> 




<!-- FOOTER --> 
    <div id="footer"> 

     <span style="float:left;"> 
      <a href="/" title="Home">Home</a><br> 
      <a href="/" title="About">About</a><br> 
      Contact<br> 
      <a href="http://janelleski.net">Theme</a> 
     </span> 


<span style="float:right; padding-left:5px; text-align:right;"> 



     <a href="/" title="Archive">Archive</a><br> 
     <a href="/" title="Design">Design</a><br> 
     <a href="/" title="Fashion">Fashion</a><br> 
     <a href="/" title="Interior+Design">Interiors</a><br> 
     <a href="/" title="Photography">Photography</a><br> 
     <a href="/" title="Recipes">Recipes</a> 


    </div> 



</div> 



{block:Twitter} 
    <script type="text/javascript" src="/tweets.js"></script> 
{/block:Twitter} 
</body> 
</html>
來源
2014-01-15 alextomato
你可以使用div並添加一個很酷的漸變：http://jsfiddle.net/Jum6P/3/ ofc。你必須改變高度，你可能不得不改變顯示。這裏是我的一個工作示例：http://skyleo.de/pflug/index.html –
你可以給內容的div邊框右側（以＃內容試試）
或左邊框部件的div（在#sidebar試試）
，並給予邊框樣式，邊框色等風格...
來源
2014-01-15 05:47:13
很酷，我該怎麼做？ – alextomato
in css // add this #sidebar { border-right：1px solid black; } //或＃內容{ border-left：1px純黑色; } –
如何在兩個Div之間創建垂直線Tumblr

回答

相關問題
