如图,我有一个父容器(红色边框)和两个子元素(黑色边框)。我希望父容器被文字内容撑开,而不是被图片。现在父元素会被两个子元素中更高的那个撑开,如果图片比较高的话就会像图中所示。如何让图片跟随文字内容的高度,有没有纯 css
的解决方法。
jsfiddle
无论是图片还是文字,都是元素,既然是元素,只要没脱离了父元素,并且不是背景,同时父元素的高度没有一个固定值的话,那么父元素将会被最大高度的子元素撑开。所以,如果你想要父元素不被某一个子元素撑开高度,那么可以考虑下面几个点:
absolute
绝对定位方式,脱离文档流;所以,简单来说,使用定位的方式应该是比较简单直接的。
你可以使用 CSS 的 flex
属性来实现这个需求。flex
布局是一种灵活的布局方式,允许你轻松地控制元素的对齐方式、方向和大小。
你可以将父元素设置为 flex
容器,并使用 flex-grow
属性来控制子元素的扩展。如果你希望图片跟随文字内容的高度,可以将 flex-grow
设置为 0
,这样图片就不会扩展父元素的高度。
以下是一个示例代码:
.parent { display: flex; flex-direction: column;}.child { flex-grow: 0;}
在这个示例中,.parent
是父元素,.child
是子元素。通过将 flex-grow
设置为 0
,子元素不会扩展父元素的高度。这样,父元素的高度就只会被文字内容撑开。
问题内容: 假设我有以下代码: 现在,我需要在上面,但是在jsFiddle中,您可以看到child元素呈现在before之前。 如果您删除 类 或 ,则一切正常。这是我需要的正确行为: http //jsfiddle.net/ZjXMR/1/ 如何在不删除页面的情况下执行此操作? 问题答案: 这是不可能的,因为子级的设置与父级的堆叠索引相同。 您已经通过从父级移除z-index来解决该问题,将其保
在此代码中,节的高度为0。但img的高度为600px。我如何将img的高度赋予它的父元素,也就是section? 正如您在图片部分中看到的,class=“banner container”没有高度。
本文向大家介绍使用CSS为其父元素的第一个子元素的每个 元素设置样式,包括了使用CSS为其父元素的第一个子元素的每个 元素设置样式的使用技巧和注意事项,需要的朋友参考一下 要设置作为其父级第一个子级的每个<p>元素的样式,请使用CSS:first-child选择器。 示例 您可以尝试运行以下代码来实现:first-child选择器-
问题内容: 我想将一个DIV元素移到另一个元素中。例如,我要移动此对象(包括所有子对象): 到这个: 这样我有: 问题答案: 曾经尝试过普通的JavaScript … 吗?
本文向大家介绍怎样解决float元素无法撑起父级容器的高度?相关面试题,主要包含被问及怎样解决float元素无法撑起父级容器的高度?时的应答技巧和注意事项,需要的朋友参考一下 父級元素overflow:hidden; 或者給父級元素增加偽類
我在JavaSelenium中运行测试,在那里我找到一个元素,一旦找到就需要找到紧接在前的元素。代码需要是动态的,因为我不知道我开始的元素是5个中的第3个、10个中的第6个还是2个中的第1个。 问题是,使用xpath中的前置兄弟,我得到了找到的元素之前的所有元素,而不是紧接在它之前的元素。例如,这是我的xml: 假设我已经找到了作为WebElement的“Value 2”标签,那么我接下来要做的就