Question

到目前为止，这是我的CSS。看起来父div的左边填充是好的（即没有被子div覆盖），但它的右边填充由子div覆盖。有什么想法吗？

.div_parent {
    position: absolute;
    height: 720px;
    width: 600px;
    top: 30px;
    background-color: blue;
    padding-left: 10px;
    padding-right: 10px;
}

.div_child1 {
    position: absolute;
    height: inherit;
    width: 15%;
    background-color: tan;
}

.div_child2 {
    position: absolute;
    height: inherit;
    width: 85%;
    left: 15%;
    background-color: green;
}

这也是我的HTML：

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='calendar.css' >
        <script src='calendar.js'></script>
    </head>
    <body>
        <div class = 'div_parent'>
            <div class = 'div_child1'>
                <h1>test</h1>
                <p>test2</p>
                <p>test3</p>
            </div>
            <div class = 'div_child2'>
            </div>
        </div>
    </body>
</html>

Answer 1

嗯，问题是你没有给第一个孩子的'左'并且默认为自动，对于第二个孩子你给了15％。此外，在计算儿童的宽度时，您必须考虑父母的填充，而您没有。如果你把孩子的总宽度加起来，它等于父的宽度，即620，所以通过计算，父div中没有足够的空间让它们并排堆叠。解决该问题的一个更好的解决方案是使用左浮动块div或更好地使用calc（）来考虑填充。

.child-1{
width:calc(15% - 10px);
}

.child-2{
width:calc(85% - 10px);
}

Fiddle

Answer 2

使用float：left;在两个div上并带走左边：15％;和位置：绝对;

试图覆盖2个子div之间100％的父div宽度（不包括填充）。

2 个答案: