Question

我正在修改我的一个页面的当前版本，其中每个框中有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个。当我尝试分配变量以确定哪个框位于哪里时，问题就出现了，因为我正在尝试制作它，以便我们可以将每个框调整为顶部，底部或中间或我们希望的其他地方，以及还可以调整它是坐在左边，右边还是填满整个盒子。我得到了一个“半工作”的解决方案，其中我使用它来检查如果一个盒子的位置等于一，它填充空间，如果它等于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>

但是如果我连续两个漂浮在左边，那么一个漂浮在右边的（就像它一样）漂浮在左边的第二个旁边而不是第一个因为使用了清晰，但如果我不喜欢t使用clear然后第二个左边将坐在第一个左边。我被困住了，不知道如何解决这个问题。

Answer 1

漂浮可能非常棘手，因为在这种情况下盒子可能具有不同的高度。我曾经为我的网站使用了类似的设计，并且不得不提出一些技巧。很少有事情可以解决你的问题：

1）每当你在一行中有两个盒子（无论是左边，右边，还是左边和右边）都有一个div容器。通过这种方式，您将隔离它们，第三个框不会受其影响。确保该框已溢出：隐藏。我实际上会把溢出：隐藏在所有这些上，这应该可以解决你可能遇到的边缘问题。

<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）另一种解决方案（通常不实用，但可以在几种情况下工作）是指定框的高度。但如果你有动态内容，那就别忘了。

根据变量WITHOUT列浮动div的左侧或右侧

1 个答案: