Question

div1向左浮动，因此div2出现在它旁边。如果我想在div2上添加10px左边距，为什么我需要将其设置为60px？即。 div1 + 10px的宽度。我可以将div2设为div1，这样我就可以将div2左边距设置为10px？

<!DOCTYPE html>
<html>
    <head>
        <style>
            #div1{
                width: 50px;
                float: left;
            }
            #div2 {
                margin-left: 60px;
            }
            #div1, #div2{
                border: 1px solid red;
            }
        </style>
    </HEAD>
    <BODY>
        <div>
            <div id="div1">
                div1
            </div>
            <div id="div2">
                div2
            </div>
        </div>
    </BODY>
</html>

JSfiddle

Answer 1

Floats将元素从文档流中分离出来。你需要在60px处添加左边距的原因是要清除左浮动的div ...如果你想要它们都是内联的，我建议使用：

        #div1{
            width: 50px;
            display: inline-block;
        }
        #div2 {
            margin-left: 10px;
            display: inline-block;
        }
        #div1, #div2{
            border: 1px solid red;
        }

Answer 2

您需要为＃div2添加float: left。

我可以将浮动的div保证金值相对吗？

2 个答案: