html - 为什么 child block 的行为与他们的 parent 不同，相对于他们 parent 的 sibling ？-6ren

html - 为什么 child block 的行为与他们的 parent 不同，相对于他们 parent 的 sibling ？

转载作者：行者123 更新时间：2023-11-28 15:46:42

25

4

我有一个这样的 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

leftwing、rightwing 和内容 block 是兄弟。contacts, title 和 edited 是 sibling 。

这是我的 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);
}

这是结果:

为什么content和top-content blocks(蓝色和黄色)的位置和维度不受左右翼的影响，但是top-content block的children的位置和维度(contacts，contacts，标题和编辑)是？

将 child 的显示更改为“阻止”并不能解决这个问题。除了 background-color 和 display: inline-block 之外，top-content block 和它的子 block 之间没有区别。

最佳答案

无论是 child ，如果他们是display:inline-block，或者他们的文本内容，如果 child 是display:block，都会避免 float ，因为它们所在的行框不会与 float 重叠。

虽然蓝色和黄色框是 block 框，即它们不在行框内。 block 框，除非它们建立 block 格式上下文，否则不会注意到 float 的存在，因此会完全延伸到整个页面。

关于html - 为什么 child block 的行为与他们的 parent 不同，相对于他们 parent 的 sibling ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42576612/

25

4

0

文章推荐： ios - 当我们在 IOS 10.2 中滑过它时，UISwitch 不工作

文章推荐： swift - 字符串数组中的字符swift

文章推荐： CSS 选择器匹配没有内联应用背景颜色的元素

angular - “无法解析模块...相对于...”编译应用程序时出错
当我编译我的 ionic 4 应用程序时，我得到这个错误:不开始。但是，如果我更改代码中的某些内容并再次编译，代码将成功编译。我查了一下它可能与路径(绝对/相对)有关。但在这些问题中，解决方案是使用相
ubuntu - 我的终端发生了一个奇怪的情况，相对于 texlive
现在我发现当我打开终端时，它总是显示这些消息: bash: /usr/local/texlive/2012/texmf/doc/man:: No such file or directory bash
angular - 相对于 Angular 中的子模块导航
我有一些具有不同 url 前缀的嵌套模块。现在我想在一个模块中导航而不指定前缀(在我的模块中，我不想知道在哪个前缀下可以访问该模块)。这些是我的 app.module 的路线: const APP_
java - 相对于 block 大小数量的日期范围搜索
我想在java中进行日期范围搜索假设我想搜索从2019年10月22日到当前日期。但问题是在两周的 block 大小中进行日期范围搜索(考虑到这可能会有所不同，但以周为单位)，例如这里开始日期将为 20
java - 相对于 x 轴运动镜像
我正在尝试实现移动到单击鼠标的点。但是我遇到了 X 轴镜像行为的问题。当我点击顶部 -> 它移动到底部，当我点击底部 -> 它移动到顶部。这里是原始位置的例子我点击了屏幕上有红十字的位置。但它
Java - 相对于 JFrame 的光标位置
尝试使用以下方法让对象跟随光标: int mx =(int) MouseInfo.getPointerInfo().getLocation().getX()-50; Player.setX(mx);
java - 相对于 JFrame 移动组件
我有 4 个 JButton 设置在彼此下方。我希望当用户水平调整框架大小时它们左右移动。例如:帧大小:400,400 按钮位置:300,200 现在我将框架大小调整为:600,400 Button
ios - 相对于 Storyboard 中图像的特定点定位元素
我想要做的是将一个元素(我用作背景的彩色 UIView)定位到我的 Storyboard 中，以便它从 ImageField 的中间开始。并填充所有内容，直到屏幕底部。我正在使用 xcode7 和 s
c++ - 相对于 cpp 的路径不是工作目录
我正在编写一些 C++ 代码，它主要为共享它的其他两个项目提供一个类，但也包括一个小程序，以便在需要时可以从命令行使用它。该类必须加载一些资源，这些资源被写入资源文件夹中的多个文件。这些文件的路径当然
ios - 相对于 iOS 中帧的初始引用的电话加速
我能以某种方式随时获得相对于帧初始引用的加速度矢量吗？ (我的意思是:xArbitraryZVertical 模式下的帧引用，我第一次得到 Core Motion 数据)我试图做什么:每次我得到 CM
html - 相对于 CSS 中的可用空间居中文本
saved 我希望 div#one 在父 div 的左边缘和提交按钮的左边缘之间的空间居中。最佳答案还有几种方法: saved 很难说 saved 文本没有居中在容器 d
javascript - 相对于 mousemove 的动画背景图像
所以我在页面上有一个带有背景图像的对象，在 mousemove 上它移动了相对于鼠标的背景位置。但我遇到的唯一问题是在鼠标进入对象时将背景图像动画化到鼠标的当前位置。我能够将背景位置动画化回其原始位
javascript - 相对于 div 中心的图像放大和缩小不起作用
我的一个网站中有一个图像缩放属性。我想相对于 div 的中心缩放图像。缩放功能如下。 function zoom(zm) { img=document.getElementById("pic"
css - 相对于 Logo 图像的大小和垂直中心导航栏元素
我正在尝试调整水平导航栏左侧的导航栏 Logo 的大小，然后让其余导航栏元素占据相同的垂直空间并在空间中垂直居中。导航栏元素目前不使用完整的垂直空间。我尝试过的每个尺寸属性都产生了另一个问题。感谢所有
css - 将文本左对齐(相对于)div
我有一些 h2 文本当前在移动 View 中左对齐，位于居中的 div 上方。我怎样才能将它对齐到移动 View 中相对于 div 的左对齐(应用下面的 CSS 中提供的媒体查询)？ CodePen
CSS:相对于 float 图像居中文本元素
我想让文本元素(在本例中为 h2 副标题)居中，方法是让它忽略左侧的 float 图像。我更喜欢 h2 副标题与 h1 标题垂直居中对齐。有没有什么办法可以单独使用 CSS 来做到这一点？这是一个示
html - margin 相对于 parent ？
您好! 我在这个网站上工作，但我一直遇到同样的问题。当我把边距放在百分比而不是像素时，它似乎是从包装器或页面中获取百分比。可能是一些愚蠢的错误，但我并没有真正使用过百分比。无论如何，我所说的类是“ L
html - 相对于 div 的动态搜索栏
我很好奇这是怎么做到的，我做了类似的东西，例如 Home About Search bar Container
html - 相对于 TextField 对齐标签
我希望我的 firstLabel 位于同一行文本字段的右侧。 //css input[type="text"]{ display:block; margin-botto
java - 相对于 Frame 的鼠标坐标
我正在尝试绘制多边形，并希望能够单击我的框架以获取鼠标坐标，以便更快地将心理图像转换为 x/y 值。我在用 System.out.println("("+ MouseInfo.getPointerI

首页

博学

6Ren·AI

商城

html - 为什么 child block 的行为与他们的 parent 不同，相对于他们 parent 的 sibling ？