将流体 div 向上移动一行 - 但不是在 Dreamweaver 中

Question

我来自使用 Dreamweaver，我希望并排放置 2 个流体 div。在 Dreamweaver 中，您将创建两个 div（它们会自动相互对齐），然后将它们调整为网格，然后单击“向上移动一行”。

当然，在像 Brackets 这样的纯代码应用程序中，没有可视化编辑器带有一个按钮来单击“向上移动一行”。

我的问题是，当我扩展页面时，当页面调整大小时，第二个 div（内容无关紧要，只有第二个 div [在代码中的两个]）会继续移动，如反对保持比例。

有人有什么想法吗？

谢谢

这是问题中的两个 div

            <div id="soundcloud" class="fluid">
          <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/2744486&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>
     </div><!-- end soundcloud -->

<div id="content" class="fluid">

    <div id="tabs">
    <!--TABS-->

        <ul>
            <li><a href="#tabs-1">About</a></li>
            <li><a href="#tabs-2">Testemonials</a></li>
            <li><a href="#tabs-3">Contact</a></li>
        </ul>

    <!--TAB CONTENT-->

        <div id="tabs-1">

        </div><!-- END TAB 1-->

        <div id="tabs-2">

        </div><!-- END TAB 2-->

        <div id="tabs-3">

        </div><!-- END TAB 3-->

    </div><!--END TABS-->

</div> <!-- end content -->

Answer 1

首先（我根据经验说话），停止使用 Dreamweaver。 WYSIWYG 编辑器在 Web 开发方面对您不利，并且通常会导致无法维护的脏代码。您最好手动编写 HTML/CSS 并在目标浏览器（FireFox、Chrome、IE 等）中进行测试。

这里有一些代码可以让你并排显示两个流体 div：

HTML

<div class="row">
    <!-- .row > div is applied here because this div is an immediate child of the parent-->
    <div class="first">
        <p>First fluid section</p>
    </div>
    <!-- .row > div is applied here because this div is an immediate child of the parent-->
    <div class="second">
        <p>Second fluid section</p>
    </div>
</div>

CSS

/* Apply this style to the parent div */
.row {
    display: block;
    width: 100%;
}

/* Apply this style to the immediate div children of the parent */
.row > div {
    float: left;
    display: inline-block;
    width: 50%;
}

.first {
    background: #FF0000;
}

.second {
    background: #0000FF;
}

jsFiddle：http://jsfiddle.net/q9JpH/

确保彻底测试并在必要时应用优雅降级...浏览器世界中的兼容性是野蛮的！