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/

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

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

1 个答案: