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

Question

我刚开始使用 Dreamweaver，我希望并排放置 2 个流畅的 div。在 Dreamweaver 中，您可以创建两个 div(它们会自动对齐)，然后将它们调整为网格大小，然后单击“向上移动一行”。

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

我的问题是，当我展开页面时，第二个 div(内容无关紧要，代码中只有第二个 div [out of the two])会在调整页面大小时继续移动，因为反对保持比例。

有没有人有什么想法？

谢谢

这是问题中的两个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。所见即所得的编辑器在 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/

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