gpt4 book ai didi

css - 强制 :after pseudo to respect floated element

转载 作者:行者123 更新时间:2023-11-28 16:44:43 26 4
gpt4 key购买 nike

在此代码段中,您可以找到带有装饰下划线的 h2 header ,它是使用 :after 伪元素实现的。一切都运行良好,直到我们有一个 float 图像应该出现在前面提到的 h2 的左侧:h2 将正确 float ,但是伪元素不会,这会破坏预期的效果。 (橙色小线应该在 h2 最后一行的下方。)

有什么办法解决这个问题吗?

div.post-img-wrap img.thumbnail {
float: left;
max-width: 200px;
padding-right: 20px;
padding-bottom: 10px;
margin-top: 25px;
}
article h2:after {
content: "";
display: block;
z-index: 1;
margin: 0;
width: 10%;
height: 2px;
margin-top: 10px;
left: 0;
background: #E96656 none repeat scroll 0% 0%;
}
<body>
<article>
<header>
<div class="post-img-wrap">
<a href="#">
<img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
</a>

</div>
<h2><a href="#">This is a very long title with a lot of text in here, so long, so long, so veeeery long</a></h2>

</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
</div>
</article>
</body>

最佳答案

问题是 float 元素是out-of-flow :

An element is called out of flow if it is floated, absolutely positioned, or is the root element.

因此,它们不会像 in-flow 那样影响周围的元素元素会。

这在 9.5 Floats 中有解释:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

enter image description here

但是, block 元素建立一个Block Formatting Context (是 BFC 根)是异常(exception),如 9.5 Floats 中所述:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context […] must not overlap the margin box of any floats in the same block formatting context as the element itself.

enter image description here

建立 BFC 的常用方法是设置 overflow除了visible,例如

article h2:after {
overflow: hidden;
}

div.post-img-wrap img.thumbnail {
float: left;
max-width: 200px;
padding-right: 20px;
padding-bottom: 10px;
margin-top: 25px;
}
article h2:after {
content: "";
display: block;
z-index: 1;
margin: 0;
width: 10%;
height: 2px;
margin-top: 10px;
left: 0;
background: #E96656 none repeat scroll 0% 0%;
overflow: hidden;
}
<article>
<header>
<div class="post-img-wrap">
<a href="#">
<img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
</a>

</div>
<h2><a href="#">This is a very long title with a lot of text in here, so long, so long, so veeeery long</a></h2>
</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
</div>
</article>

关于css - 强制 :after pseudo to respect floated element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33352569/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com