Question

我刚开始学习html / css并遇到了一个我不太懂的问题。

<!DOCTYPE html>
<html lang="en">

<head>
<style>

.parenta {
    width: 30%;
    float: left;
    background-color : #01DFD7; 
}

.parentb {
    width: 70%;
    float: left;
    background-color : #01DFD7;
}

.child{
    background-color : #F5A9F2;
    margin-top: 2%; 
}

</style>

</head>

<body>

    <div class="parenta">
            A
            <div class="child">A</div>

    </div>

    <div class="parentb">
            B
            <div class="child">B</div>
    </div>


</body>

</html>

为什么子元素不对齐？如果我将parenta和parentb的width属性更改为50％，它可以正常工作。此外，如果我删除margin-top，它也可以。

由于

Answer 1

在这种情况下我不会使用带有％的margin-top，例如通过更改为px可以解决此问题。

只是小费。使用px top and bottom和％for left和right。

Css宽度子对齐

1 个答案: