Question

如果我将firstGroup设置为float: right，我会按预期在右侧获得第一组的两列。但是，如果我将其设置为float: left，我只会将以下元素放在第一个的底部！

注意：我需要一直支持IE7，所以没有column-count。

这是我页面的一个大大简化的版本（我只留下了相关的块元素，只给出了一些示例项目）：

<!DOCTYPE html>
<html>
<head>
    <title>Take</title>
    <style type="text/css">
        .group
        {
            margin-bottom: 20px;
            width: 50%;
            min-width: 530px;
        }

        .group > .group
        {
            margin-bottom: 0px;
        }

        .group > .label
        {
            display: block;
            width: 510px;
            padding: 5px;
            border: 1px solid black;
        }

        .firstGroup
        {
            float: left;
        }

        .item
        {
            display: block;
            width: 510px;
            padding: 5px;
            border: 1px solid black;
        }

        .item .label
        {
            display: block;
            float: left;
            width: 200px;
            height: 20px;
        }

        .header textarea
        {
            display: block;
        }

        .header
        {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="main">
            <h2>Title</h2>
            <form>
                <div class="header">
                    Notes :
                    <textarea name="Notes"></textarea>
                </div>
                <div class="group firstGroup">
                    <span class="label" style="background-color: #005588; color: white;">List 1</span>
                    <div class="group">
                        <span class="label" style="background-color: #999999; color: #000000;">Sub List 1</span>

                        <span class="item" style="background-color: #339933; color: #000000;">
                            <span class="label">Item 1</span>
                            <span class="options">
                                <span class="option"><input name="item[0].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[0].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[0].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[0].TestNotes" value="" /></span>
                        </span>

                        <span class="item" style="background-color: #339933; color: #000000;">
                            <span class="label">Item 2</span>
                            <span class="options">
                                <span class="option"><input name="item[1].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[1].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[1].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[1].TestNotes" value="" /></span>
                        </span>

                        <span class="item" style="background-color: #339933; color: #000000;">
                            <span class="label">Item 3</span>
                            <span class="options">
                                <span class="option"><input name="item[2].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[2].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[2].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[2].TestNotes" value="" /></span>
                        </span>
                    </div>
                    <div class="group">
                        <span class="label" style="background-color: #999999; color: #000000;">Sub List 2</span>

                        <span class="item" style="background-color: yellow; color: #000000;">
                            <span class="label">Item 1</span>
                            <span class="options">
                                <span class="option"><input name="item[3].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[3].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[3].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[3].TestNotes" value="" /></span>
                        </span>
                    </div>
                </div>
                <div class="group">
                    <span class="label" style="background-color: red; color: white;">List 2</span>

                    <span class="item" style="background-color: #339933; color: #000000;">
                        <span class="label">Item 1</span>
                        <span class="options">
                            <span class="option"><input name="item[4].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                            <span class="option"><input name="item[4].itemResultID" type="radio" value="1" />Yes</span>
                            <span class="option"><input name="item[4].itemResultID" type="radio" value="2" />No</span>
                        </span>
                        <span class="notes"><input type="text" name="item[4].TestNotes" value="" /></span>
                    </span>

                    <span class="item" style="background-color: #339933; color: #000000;">
                        <span class="label">Item 2</span>
                        <span class="options">
                            <span class="option"><input name="item[5].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                            <span class="option"><input name="item[5].itemResultID" type="radio" value="1" />Yes</span>
                            <span class="option"><input name="item[5].itemResultID" type="radio" value="2" />No</span>
                        </span>
                        <span class="notes"><input type="text" name="item[5].TestNotes" value="" /></span>
                    </span>
                </div>
                <input type="submit" value="Submit" />
            </form>
        </div>
    </div>
</body>
</html>

我在FF 8和IE 9中测试过，两者都有相同的行为。

Answer 1

你应该漂浮 .group 而不只是.firstGroup

为什么我的元素只能在右边浮动（不是左边）

1 个答案: