css - 无法并排对齐 div

Question

我正在尝试让 www.talkjesus.com(vBulletin 论坛)上的 shoutbox 向左浮动，而当天的经文(橙色)则 float 在 shoutbox 的最右侧。我尝试了很多变体，但它不起作用，我被卡住了。感谢您的帮助。

我现在使用的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;
    }

Answer 1

您是否尝试过将 float 属性应用于 .floatcontainer 元素？

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

此处需要设置 width 属性，因为第二个 .floatcontainer block 中脚本的输出会向文档添加一个宽度为 100 的 div 元素%。看看这里的输出:http://goo.gl/Bw7iaD (参见第一个元素的内联样式)。这使得经文框跨度为全宽，除非它的父容器具有指定的宽度。

这是工作代码的示例:http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe