草庐IT

first-child

全部标签

html - child 比最大高度的 parent 大。溢出没有影响

我想要一个具有最大高度的父元素和一个填充该父元素的子元素。如果子项的内容超出父项,则应出现滚动条。我试着这样解决:div.parent{max-height:50px;width:100px;border:1pxsolidblack;}div.child{height:100%;overflow-y:auto;}abcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcde不幸的是,这并没有像预期的那

html - child 比最大高度的 parent 大。溢出没有影响

我想要一个具有最大高度的父元素和一个填充该父元素的子元素。如果子项的内容超出父项,则应出现滚动条。我试着这样解决:div.parent{max-height:50px;width:100px;border:1pxsolidblack;}div.child{height:100%;overflow-y:auto;}abcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcde不幸的是,这并没有像预期的那

html - Flexbox "align-items : center"缩小了 child 的最大宽度

我有一个带有align-items:center的flexboxdivcontainer,以及三个child。其中之一有max-width:200px(在代码中,second-ch),它也是一个flex,有两个子节点,分布有justify-content:space-between,但second-ch不遵循其max-width。如果我从container中删除align-items:center,second-ch再次采用所​​需的宽度,但其余元素不再位于中心.我该如何解决?.container{display:flex;flex-direction:column;justify-c

html - Flexbox "align-items : center"缩小了 child 的最大宽度

我有一个带有align-items:center的flexboxdivcontainer,以及三个child。其中之一有max-width:200px(在代码中,second-ch),它也是一个flex,有两个子节点,分布有justify-content:space-between,但second-ch不遵循其max-width。如果我从container中删除align-items:center,second-ch再次采用所​​需的宽度,但其余元素不再位于中心.我该如何解决?.container{display:flex;flex-direction:column;justify-c

html - Flexbox 堆叠不同高度的 child

这个问题在这里已经有了答案:HowtoCreateGrid/TileView?[duplicate](8个答案)关闭7年前。我正在构建一个图像组合网站,我需要根据图像的可变大小来堆叠这些图像。到目前为止,这是我使用flexbox取得的成果:这就是我要达到的目标!!有人知道如何让child在flexbox显示器上以这种方式堆叠吗?我发誓我在flexbox教程的任何地方都找不到这个特殊的结构,尽管我在tumblr博客上看到过几次。这是我的代码:http://jsfiddle.net/822h7ztd.flexman{width:100%;padding:.2vw;flex-flow:row

html - Flexbox 堆叠不同高度的 child

这个问题在这里已经有了答案:HowtoCreateGrid/TileView?[duplicate](8个答案)关闭7年前。我正在构建一个图像组合网站,我需要根据图像的可变大小来堆叠这些图像。到目前为止,这是我使用flexbox取得的成果:这就是我要达到的目标!!有人知道如何让child在flexbox显示器上以这种方式堆叠吗?我发誓我在flexbox教程的任何地方都找不到这个特殊的结构,尽管我在tumblr博客上看到过几次。这是我的代码:http://jsfiddle.net/822h7ztd.flexman{width:100%;padding:.2vw;flex-flow:row

html - CSS - 如果 child 有特定的类(class),则设计父类(class)

这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:ComplexCSSselectorforparentofactivechildIsthereaCSSparentselector?有没有一种方法可以根据其子元素是否具有特定类来设计父类?text.text我想根据子类是content1还是content2以不同方式设计第一个.container。它必须是纯css解决方案,没有javascript。

html - CSS - 如果 child 有特定的类(class),则设计父类(class)

这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:ComplexCSSselectorforparentofactivechildIsthereaCSSparentselector?有没有一种方法可以根据其子元素是否具有特定类来设计父类?text.text我想根据子类是content1还是content2以不同方式设计第一个.container。它必须是纯css解决方案,没有javascript。

html - :before to all children except :first-child

我有一个水平导航。我试图用“|”分隔每个导航项(管道)仅使用css。HTMLFirstSecondThirdFourthFifth现在看起来像这样FirstSecondThirdFourthFifth我希望它看起来像这样First|Second|Third|Fourth|Fifth我可以使用css来放置一个“|”在每个之前li:before{content:"|";}结果如何|First|Second|Third|Fourth|Fifth如何在不添加“|”的情况下执行此操作到第一项? 最佳答案 您可以使用:not伪类:li:not(

html - :before to all children except :first-child

我有一个水平导航。我试图用“|”分隔每个导航项(管道)仅使用css。HTMLFirstSecondThirdFourthFifth现在看起来像这样FirstSecondThirdFourthFifth我希望它看起来像这样First|Second|Third|Fourth|Fifth我可以使用css来放置一个“|”在每个之前li:before{content:"|";}结果如何|First|Second|Third|Fourth|Fifth如何在不添加“|”的情况下执行此操作到第一项? 最佳答案 您可以使用:not伪类:li:not(