css - 与其他人连续有一个 div 吗？

Question

我已经阅读了一堆关于并排（行）div 的 SO 问题/答案，但我认为我没有掌握它，因为我找不到针对我的特定设置的解决方案：

http://www.trforums.com/h18-iwaku

基本上，我希望最底部的 div 位于“Hey，What's up”、“Navigation”和“Connect”框的右侧，而不是在它们下方。这可能吗？

div 本身只是具有相应 html 内容的类。这是非常基本的，但这是我的代码：

http://pastebin.com/AQrqqewA

我的 html 非常生锈，因此非常欢迎其他建议。谢谢你的帮助。

Answer 1

尝试在 DIV 中包围每一列：

<!-- Left column -->
<div id="leftColumn">
    <div class="ex">
        <center><img style="display: inline;" src="http://i.imgur.com/wCP3WP3" alt="" /></center>
        <h1>Hey, what's up?</h1>
    </div>

    <div class="navbar">
        <b>NAVIGATION:</b> <a href="http://joshpho.weebly.com/zukan.html">Zukan</a> | <a href="http://joshpho.weebly.com/movies.html">Movies</a> | <a href="http://joshpho.weebly.com/retsuden.html">Retsuden</a>  | <a href="http://joshpho.weebly.com/misc.html">Photography</a> |
        </div>

    <div class="connect">
        <b>CONNECT:</b> <a href="http://joshpho.livejournal.com/profile">Livejournal</a> 
    </div>
</div>

<!-- Right column -->
<div id="rightColumn">
    <div class="slideshow">
        Bottom div that I want in a row with the top one...
     </div>
</div>

CSS：

#leftColumn {
    float: left;
    width: 410px; // Width of this column
}

#rightColumn {
    float: left;
    width: 500px; // Width od this column
}

Answer 2

将 with a class移动到with diva classslideshow旁边并应用浮点数，正如您在JS Bin中看到的那样divex

最终结果可以在这里看到

Answer 3

使用float:left或display:inline在您希望彼此相邻的 div 上。