1

我正在修改我的一个页面的当前构建，其中每个框中有 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然后第二个左边将坐在第一个左边。我被卡住了，不知道如何解决这个问题。

4

1 回答 1

1

Floating can be very tricky because of the different heights the boxes may have in that case. I used a similar design once for my website and had to come up with a few tricks. Few things that may solve your issue:

1) Whenever you have 2 boxes in a single line (be it both left, both right, or one left and one right) have a div container around it. This way you will isolate them and the third box won't be affected by it. Make sure that box has overflow:hidden. I actually would put overflow:hidden on all of them, this should fix problems you may have with margins.

<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/ if you want to play around with it

2) It may be better to have ALL boxes floating left, unless you want the following scenario: Double column Single right Double Column

But then you'll have a hole on the left side.

3) Another solution (that is usually not practical, but can work on few scenarios) is o specify a height for the boxes. But if you have dynamic content, forget about it.

于 2013-08-21T13:55:33.857 回答