0

私は、www.talkjesus.com (vBulletin フォーラム) のシャウトボックスを左にフロートさせ、その日の詩 (オレンジ) をシャウトボックスの右側にフロートさせようとしています。私は非常に多くのバリエーションを試しましたが、うまくいきません。あなたの助けに感謝します。

私が現在使用しているフォーラムホーム テンプレート コードは次のとおりです。

    <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;
    }
4

1 に答える 1

0

float プロパティを.floatcontainer要素に適用しようとしましたか?

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

2 番目のブロックのスクリプトの出力により、幅 100% の div 要素がドキュメントに追加widthされるため、ここでプロパティを設定する必要があります。.floatcontainerここで出力を見てみましょう: http://goo.gl/Bw7iaD (最初の要素のインライン スタイルを参照)。これにより、親コンテナーの幅が指定されていない限り、詩ボックスは全幅に広がります。

作業コードの例を次に示します: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe

于 2013-08-26T22:37:15.240 に答える