Html Css宽度子对齐_Html_Css - Fatal编程技术网

Html Css宽度子对齐

html css

Html Css宽度子对齐,html,css,Html,Css,我刚开始学习html/css，遇到了一个我不太理解的问题 <!DOCTYPE html> <html lang="en"> <head> <style> .parenta { width: 30%; float: left; background-color : #01DFD7; } .parentb { width: 70%; float: left; background-color :

我刚开始学习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>


B.家长A{
宽度：30%；
浮动：左；
背景色：#01DFD7；
}
B.父母B{
宽度：70%；
浮动：左；
背景色：#01DFD7；
}
.孩子{
背景色：#F5A9F2；
利润率最高：2%；
}
A
A
B
B

为什么子元素没有对齐？如果我将parenta和parentb的width属性更改为50%，那么效果很好。此外，如果我删除页边空白顶部，它也可以工作

谢谢

在这种情况下，我不会使用带有%的边距上限，例如通过更改为px可以解决此问题

只是一个提示。使用px top和bottom以及%表示左侧和右侧。

边距顶部位于每个孩子的身上，您想做什么？