2013-08-26 162 views
0

我試圖讓www.talkjesus.com(vBulletin論壇)上的留言箱左移,而當天的詩句(橙色)漂浮在留言箱右側。我已經嘗試過這麼多的變化,但它不工作,我卡住了。你的幫助表示讚賞排列並排問題並列排列

我現在使用的forumhome模板代碼爲:

<div class="blockbody formcontrols floatcontainer"> 

    <div id="wgo_onlineusers" class="wgo_subblock"> 
        <h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3> 
     <div style="text-align: center; line-height: 0" class="blockrow"> 
     <div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div> 
     <div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div> 
     </div> 
    </div> 
    </div> 

    <br /> 

    <div class="blockbody formcontrols floatcontainer"> 
    <div id="wgo_onlineusers" class="wgo_subblock"> 
    <h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3> 
    <div> 
    <div style="font-size:16px; line-height:28px; padding:10px; color: #797979"> 
    <script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&amp;type=js2&amp;tw=auto&amp;tbg=ffffff&amp;bw=0&amp;bc=000000&amp;ta=L&amp;tc=43A6DF&amp;tf=Open Sans&amp;ts=14&amp;ty=B&amp;va=L&amp;vc=43A6DF&amp;vf=Open Sans&amp;vs=12&amp;tt=3&amp;trn=NASB"></script> 
    </div> 
    </div> 
    </div> 
    </div> 

相關的CSS代碼...

/* Auto-clearing of floats */ 
    .floatcontainer:after, 
    .formcontrols .blockrow:after, 
    dl.stats:after { 
     content:"."; 
     display:block; 
     height:0; 
     clear:both; 
     visibility:hidden; 
    } 
    .floatcontainer, 
    .formcontrols .blockrow, 
    dl.stats { 
     display:inline-block; 
     font-weight:normal; 
    } 
    /* IE-Mac hide \*/ 
    * html .floatcontainer, 
    .formcontrols .blockrow, 
    dl.stats { 
     height:1%; 
    } 
    .floatcontainer, 
    .formcontrols .blockrow, 
    dl.stats { 
     display:block; 
    } 


    .blockrow { 
     padding:12px; 
    } 


    .blocksubhead { 
     padding:12px; 
    } 


    .blockhead_info, .blocksubhead_info { 
     float:right; 
     font-weight:normal; 
    } 
+1

你有CSS,你沒有在問題中包括哪些內容? – htxryan

+0

確定只是更新,以添加css代碼 – Bashed

+0

這是一個很大的代碼,我們不太可能只是通過查看它。如何製作一個jsFiddle,以便我們可以嘗試一下? – Marconius

回答

0

您是否嘗試過將float屬性爲.floatcontainer元素?

.floatcontainer { 
    width: 50%; 
    float: left; 
} 

因爲腳本在第二.floatcontainer塊的輸出添加一個div元素,其具有100%的寬度的原稿設置width屬性將是必要在這裏。看看這裏的輸出:http://goo.gl/Bw7iaD(參見第一個元素的內聯樣式)。這使得經文框跨越全角,除非它的父容器具有指定的寬度。

這裏的工作代碼示例:http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe