Question

我创建了2个div，其中float：left和一个float：right，每个都有50％的列宽。他们仍然没有像预期的那样流动。第二个浮点不仅位于第一个div的右侧，而且位于第一个div的下方。 Float并不符合规则。那么我在这里失去了什么规则？

   <html>
    <head>
        <title>

        </title>
        <style type="text/css">
            .column {
                width: 50%;
            }
            div.right {
                float: right;
            }
            }
            div.left {
                float: left;    
            }

            img {
              float: right;
              margin: 0 0 1em 1em;
            }
        </style>
    </head>
    <body>


    <div class='left column'>
        <img src="css-float.png">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
    </div>

    <div class='right column'>
        <img src="css-float.png">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
    </div>


    </body>
    </html>

Answer 1

您的CSS无效，因此请停止其余的样式表加载。

见这里：

        div.right {
            float: right;
        }
        }

您要关闭规则两次，删除第二个右括号

Answer 2

Fiddle

        .column {
            width: 49%;
        }

        div.left, div.right {
            float: left;  
            border-right: 1px solid;
        }

减小宽度。你需要并排，所以你加左浮动，因为两者都在同一个容器下。

Answer 3

Demo.

.column {
                width: 50%;
            }
            div.right {
                float: right;
            }

            div.left {
                float: left;    
            }

            img {
              float: right;
                     padding-right: 15px;
              margin: 0 0 1em 1em;
}

为什么css float不能按预期工作

3 个答案: