我查看了我的案例(float / clearfix,相对父/绝对子),但未发现以下问题的任何反映:
<div 2>
在灵活的环境中,有三个具有相同的高度(这要归功于flex),每个元素都包含三个元素(<div 3>
+ <p>
+ <a>
),<p>
上方和下方都有一个边距,而后者较大,以便能够离开空间用于<a>
其在附接至底部绝对位置<div 2>
的父。
这是示例(On Jsfiddle):
#accueilBloc2 {
background-color: #FFF;
text-align: center;
}
#accueilBloc2>div {
max-width: 1200px;
width: 100%;
display: inline-block;
padding: 8rem 0 12rem;
}
#accueilBloc2>div>div {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
#accueilBloc2>div>div>div {
box-sizing: border-box;
width: 33.33333333%;
padding: 1rem;
}
#accueilBloc2>div>div>div>div {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
}
#accueilBloc2>div>div>div>div>div.icon {
position: relative;
z-index: 10;
padding: 0.5rem;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-bottom: -50px;
}
#accueilBloc2>div>div>div>div>div.bloc {
padding: 6rem 3rem 3rem;
box-sizing: border-box;
background-color: #F6F6F6;
flex-grow: 1;
width: 100%;
border: 1px solid #919191;
padding: 6rem 3rem 3rem;
}
#accueilBloc2>div>div>div>div>div.bloc>div {
position: relative;
height: 100%;
}
#accueilBloc2 div.titre {
font-family: Quicksand, sans-serif;
font-size: 1.6rem;
line-height: 2rem;
}
#accueilBloc2 p {
font-family: Quicksand, sans-serif;
font-size: 1.2rem;
line-height: 1.6rem;
margin: 2rem 0 8rem;
}
#accueilBloc2 a {
font-size: 1.3rem;
text-transform: uppercase;
background-color: #FFF;
display: block;
border: 1px solid #111;
width: 100%;
padding: 1rem;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-family: Quicksand, sans-serif;
}
#accueilBloc2 a:hover,
#accueilBloc2 a:focus {
text-decoration: none;
color: #FFF;
}
#accueilBloc2_01 div.icon {
background-color: #9b9b37;
}
#accueilBloc2_02 div.icon {
background-color: #e7ac36;
}
#accueilBloc2_03 div.icon {
background-color: #c2131a;
}
#accueilBloc2_01 div.titre {
color: #9b9b37;
}
#accueilBloc2_02 div.titre {
color: #e7ac36;
}
#accueilBloc2_03 div.titre {
color: #c2131a;
}
#accueilBloc2_01 a {
color: #9b9b37;
border-color: #9b9b37;
}
#accueilBloc2_01 a:hover,
#accueilBloc2_01 a:focus {
background-color: #9b9b37;
}
#accueilBloc2_02 a {
color: #e7ac36;
border-color: #e7ac36;
}
#accueilBloc2_02 a:hover,
#accueilBloc2_02 a:focus {
background-color: #e7ac36;
}
#accueilBloc2_03 a {
color: #c2131a;
border-color: #c2131a;
}
#accueilBloc2_03 a:hover,
#accueilBloc2_03 a:focus {
background-color: #c2131a;
}
<!DOCTYPE html>
<html dir="ltr" lang="fr" prefix="og: http://ogp.me/ns#">
<head>
<title>Test Flexbox</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="accueilBloc2">
<div>
<div>
<div id="accueilBloc2_02">
<div>
<div class="icon"><img alt="Icône" src="accueilBloc2_02.svg" /></div>
<div class="bloc">
<div>
<div class="titre">Lorem ipsum</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#">Lorem ipsum</a>
</div>
</div>
</div>
</div>
<div id="accueilBloc2_01">
<div>
<div class="icon"><img alt="Icône" src="accueilBloc2_01.svg" /></div>
<div class="bloc">
<div>
<div class="titre">Duis aute irure</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Lorem ipsum</a>
</div>
</div>
</div>
</div>
<div id="accueilBloc2_03">
<div>
<div class="icon"><img alt="Icône" src="accueilBloc2_03.svg" /></div>
<div class="bloc">
<div>
<div class="titre">Excepteur sint</div>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#">Lorem ipsum</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
遇到的问题是该元素<p>
是最大的,其直接<div 2>
父元素不占用父元素的高度<div 3>
;并且仅在Firefox,IE 11和Microsoft Edge(旧版)上使用。但是,仅通过在Firefox上打开浏览器控制台并下拉<div 1>
或<div 2>
,问题就消失了。
令人惊讶的是,在Firefox的早期版本中,我不记得遇到过此类问题。
你有好主意吗 ?
感谢您的关注!
(对不起,我的英语,您有权更正我的写作)
我只是解决了问题,问题出在您的整体显示中,您没有提及内容的显示方式,只需将其添加到#accueilBloc2>div>div>div>div>div.bloc
:
display: flex;
flex-direction:column;
justify-content:space-between;
height:100% !important;
更新的css文件:
#accueilBloc2 {
background-color: #FFF;
text-align: center;
}
#accueilBloc2>div {
max-width: 1200px;
width: 100%;
display: inline-block;
padding: 8rem 0 12rem;
}
#accueilBloc2>div>div {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
#accueilBloc2>div>div>div {
box-sizing: border-box;
width: 33.33333333%;
padding: 1rem;
}
#accueilBloc2>div>div>div>div {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
}
#accueilBloc2>div>div>div>div>div.icon {
position: relative;
z-index: 10;
padding: 0.5rem;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-bottom: -50px;
}
#accueilBloc2>div>div>div>div>div.bloc {
padding: 6rem 3rem 3rem;
box-sizing: border-box;
background-color: #F6F6F6;
width: 100%;
height:100% !important;
border: 1px solid #919191;
padding: 6rem 3rem 3rem;
display: flex;
flex-direction:column;
justify-content:space-between;
height:100% !important;
}
#accueilBloc2>div>div>div>div>div.bloc>div {
position: relative;
height: 100%;
}
#accueilBloc2 div.titre {
font-family: Quicksand, sans-serif;
font-size: 1.6rem;
line-height: 2rem;
}
#accueilBloc2 p {
font-family: Quicksand, sans-serif;
font-size: 1.2rem;
line-height: 1.6rem;
margin: 2rem 0 8rem;
}
#accueilBloc2 a {
font-size: 1.3rem;
text-transform: uppercase;
background-color: #FFF;
display: block;
border: 1px solid #111;
width: 100%;
padding: 1rem;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-family: Quicksand, sans-serif;
}
#accueilBloc2 a:hover,
#accueilBloc2 a:focus {
text-decoration: none;
color: #FFF;
}
#accueilBloc2_01 div.icon {
background-color: #9b9b37;
}
#accueilBloc2_02 div.icon {
background-color: #e7ac36;
}
#accueilBloc2_03 div.icon {
background-color: #c2131a;
}
#accueilBloc2_01 div.titre {
color: #9b9b37;
}
#accueilBloc2_02 div.titre {
color: #e7ac36;
}
#accueilBloc2_03 div.titre {
color: #c2131a;
}
#accueilBloc2_01 a {
color: #9b9b37;
border-color: #9b9b37;
}
#accueilBloc2_01 a:hover,
#accueilBloc2_01 a:focus {
background-color: #9b9b37;
}
#accueilBloc2_02 a {
color: #e7ac36;
border-color: #e7ac36;
}
#accueilBloc2_02 a:hover,
#accueilBloc2_02 a:focus {
background-color: #e7ac36;
}
#accueilBloc2_03 a {
color: #c2131a;
border-color: #c2131a;
}
#accueilBloc2_03 a:hover,
#accueilBloc2_03 a:focus {
background-color: #c2131a;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句