html - float div的向左或向右，取决于变量WITHOUT列

我正在修改我的其中一个页面的当前构建，其中有X个盒子，每个盒子中的内容各不相同，有些浮动在左边，有些浮动在右边，有些填充整个列空间。当前完成的方式是这样的：

的HTML

<div class="doubleColumn">
    <div class="contentBox"></div>
    <div class="contentBox"></div>

    <div class="singleColumn left">
        <div class="contentBox"></div>
    </div>

    <div class="singleColumn right">
        <div class="contentBox"></div>
    </div>
</div>

的CSS

.doubleColumn {
    float: left;
    width: 100%;
}

.singleColumn {
    width: 49%;
}

.contentBox {
    border: 1px solid RGB(0, 0, 0);
    box-sizing: border-box;
        -moz-box-sizing: border-box;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

对于当前的解决方案，由于布局完美无缺，因此没有问题，如果我想在左右两列的下方添加另外2个较宽的内容框，我只需添加它们，然后在其下方的左列中再添加2个即可。当我尝试分配变量来确定哪个盒子在哪里时，问题就来了，因为我正在尝试制作它，因此我们可以将每个盒子调整为顶部，底部或中间，或者我们希望将其放置在其他任何位置，并且还可以调整它是位于左侧，右侧还是填充整个框。我得到了一个“半工作”的解决方案，在该解决方案中，我使用进行了检查，如果盒子的位置等于1，则将填充空间；如果盒子的位置等于2，则向左浮动；如果等于3，则向右浮动。我将在下面再次演示：

的HTML

<cfquery datasource="datasource" name="boxes">
    Select *
    From boxes
    Order by box_order
</cfquery>

<div class="doubleColumn">
    <cfoutput query="boxes">
        <cfif box_position eq 1>
            <div class="contentBox"></div>
        <cfelseif box_position eq 2>
            <div style="clear: left; float: left; width: 49%;">
                <div class="contentBox"></div>
            </div>
        <cfelseif box_position eq 3>
            <div style="clear: right; float: right; width: 49%;">
                <div class="contentBox"></div>
            </div>
        </cfif>
    </cfoutput>
</div>

但是，如果我连续有两个漂浮在左边，那么一个漂浮在右边的漂浮（就像那样）会漂浮在左边第二个而不是第一个旁边，因为使用了clear，但是如果我不使用clear的话那么第二个左边将与第一个左边并排放置。我被困住了，不知道如何解决这个问题。

最佳答案

由于箱子在这种情况下可能具有不同的高度，因此浮动可能非常棘手。我曾经为我的网站使用过类似的设计，并且不得不提出一些技巧。几件事可能解决您的问题：

1）每当一行中有2个框（左，右，左，右）时，都将有一个div容器。这样，您将隔离它们，第三个框将不受其影响。确保该框已溢出：隐藏。实际上，我会把overflow：隐藏在所有这些对象上，这应该可以解决您可能遇到的利润问题。

<div class="contentBox"></div>
<div class="container">
    <div class="singleColumn left"></div>
    <div class="singleColumn left"></div>
</div>
<div class="singleColumn right"></div>

http://jsfiddle.net/uHVKg/如果您想玩它

2）最好让所有框都向左浮动，除非您需要以下情形：
双柱
单权
双柱

但是然后您将在左侧有一个孔。

3）另一个解决方案（通常不切实际，但是可以在少数情况下使用）是o指定盒子的高度。但是，如果您拥有动态内容，那就别管它了。

关于html - float div的向左或向右，取决于变量WITHOUT列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17695513/