html - 如何在两个 Div 之间创建垂直线

标签 html css tumblr

这个主题有点乱，我正在修复它。我想在左侧帖子列和右侧边栏列之间放置一条 2px 的浅灰色垂直线。这样做有困难吗？请并谢谢!

    <!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>

最佳答案

你可以给content div的border-right(试试#content)

或小部件 div 的左边框(在#sidebar 中尝试)

并赋予 Border-style,border-color 等样式 ...

关于html - 如何在两个 Div 之间创建垂直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21129899/

上一篇：css - @font-face 不适用于 wkhtmltopdf

下一篇：javascript - 导航菜单仅垂直跟随屏幕而不是水平

相关文章：

html - 如何使用 ionic 制作 pdf 生成器？

javascript - Jquery clone() 不会克隆使用 data() 设置的新值

html - 如何在两个 div 之间创建三 Angular 形？ CSS

html - IE10的Flexbox : differences between March 2012 Draft and current frozen version

html - 你如何通过html将任何tumblr帖子的头像作为图像获取？

html - div 继续向右无限

javascript - 如何在 Blogger 中的下拉菜单中添加子菜单

html - 在手机和平​​板电脑上隐藏页脚

javascript - 使用 JavaScript 优化我的 Tumblr 的加载以自定义样式

html - 如何在行内 block 按钮之间创建空间？

©2024 IT工具网  联系我们