Question

我有这样的HTML结构：

    0.body
       ->>1.background
          ->>2.leftwing
          ->>2.rightwing
          ->>2.content block
             ->>3.top-content block
                ->>4.contacts block
            ->>4.title block
                ->>4.edited block

左翼，右翼和内容块都是兄弟姐妹。联系人，头衔和编辑是兄弟姐妹。

这是我的HTML：

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bckdrp all">
        <div class="lftfd  all">
        </div>
        <div class="rtfd  all">
        </div>
        <div class="bigbox all">
            <div class="topbox all">
                <div class="lftcnt inlblk all">
                    contact
                </div>
                <div class="midcnt inlblk all">
                    title
                </div>
                <div class="rtcnt inlblk all">
                    edited
                </div>
            </div>
            <div class="topnav all">
                <div class="toppnt all">
                    up
                </div>
            </div>
            <div class="midbox all">
                <div class="lftspc inlblk all">
                </div>
                <div class="midspc inlblk all">
                    <div class="super all">
                        LONG
                        <!--ENLONGATED-->
                    </div>
                </div>
                <div class="rtspc inlblk all">
                    <div class="navpad all">
                        <!--1--><div class="navcir all">1</div>
                        <!--2--><div class="navcir all">2</div>
                        <!--3--><div class="navcir all">3</div>
                        <!--4--><div class="navcir all">4</div>
                        <!--5--><div class="navcir all">5</div>
                        <!--6--><div class="navcir all">6</div>
                    </div>
                </div>
            </div>
            <div class="botnav all">
                <div class="botpnt all">
                    down
                </div>
            </div>
            <div class="botbox all">
                <div class="foot all">
                    <div class="acc all">
                        login
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

这是我的CSS：

.bckdrp
{
    background: url("img/bckdrp.jpg") center center no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.lftfd
{
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    float: left;
    height: 100%;
    width: 30%;
}

.rtfd
{
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    float: right;
    height: 100%;
    width: 30%;
}




.inlblk
{
    display: inline-block;
}


.bigbox
{
    background-color: blue;
}

.topbox
{
    background-color: yellow;
}

.all
{
    border: 1px solid rgba(255, 0, 0, 0.5);
}

结果如下：

为什么内容和顶部内容块（以蓝色和黄色显示）的位置和尺寸不受左翼和右翼的影响，而是顶部内容块的子项的位置和尺寸（联系人，标题和编辑）是？

将儿童的显示更改为＆＃34;阻止＆＃34;不解决这个问题。除了背景颜色和显示：内联块之外，顶级内容块和它的孩子之间没有区别。

Answer 1

如果孩子是display:inline-block，或者如果孩子是display:block，他们的文字内容将避免浮动，因为他们所在的行框不会与浮动重叠。

蓝色和黄色框虽然是块框，但它们不在行框中。阻止框，除非它们建立块格式化上下文，否则忽略浮动的存在，因此在页面上完全拉伸。

与父母相比，为什么孩子的父母与父母的行为方式不同？兄弟姐妹？

1 个答案: