Flexbox填充(占用宽度超过100%) [英] Flexbox paddings (occupy more than 100% width)
本文介绍了Flexbox填充(占用宽度超过100%)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用@ c4rlosls,我们有2个问题: https://imgur.com/a/PTF7ako
如果container-fluid
父亲拥有px-0
,则其占用的宽度超过100%.
而且.cont2 a
和.cont3 a
的父亲的div宽度没有100%.
I'm working with @c4rlosls, we have 2 issues: https://imgur.com/a/PTF7ako
If container-fluid
father has px-0
, it occupies more than 100% width.
And .cont2 a
and .cont3 a
haven't got 100% width of their father's div.
如何解决这两个问题?
.inew1{
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
height: 100%;
}
.inew2{
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
height: 100%;
}
.inew3{
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
height: 100%;
}
<div class="container-fluid px-0 ">
<div class="row no-gutters">
<div class=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">
<a href="google.uno" class="w-100">
<h1 class="">Title</h1>
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
<div class="container-fluid col-xl-4 col-lg-12 ">
<div class="row">
<div class=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">
<div class="row">
<a href="google.uno" class="w-100">
<h1 class="">Title2</h1>
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
</div>
<div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
<div class="row">
<a href="google.uno">
<h1 class="">Title3</h1>
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
推荐答案
我为您制作了一个模板.您可以使用它.
i made a template for you. you can use this.
body {
margin:0;
padding:0;
}
.flex {
display:flex;
width:100%;
}
.col1 {
flex:3;
height:500px;
}
.col2 {
flex:2;
display:flex;
flex-direction:column;
height:500px;
}
.bg {
background:url("https://picsum.photos/800/600");
width:100%;
height:100%;
position:relative;
}
.bg2 {
background:url("https://picsum.photos/600/800");
width:100%;
height:100%;
flex:1;
position:relative;
}
.bg3 {
background:url("https://picsum.photos/500/400");
width:100%;
height:100%;
flex:1;
position:relative;
}
.text_area {
box-sizing:border-box;
height:70px;
padding:20px;
background:rgba(0,0,0,.7);
width:100%;
display:flex;
flex-direction:column;
position:absolute;
bottom:0;
left:0;
justify-content:center;
}
.text_area .title {
color:#fff;
font-weight:600;
font-size:28px;
font-family:sans-serif;
}
.text_area .description {
color:#fff;
font-weight:400;
font-size:12px;
font-family:sans-serif;
}
@media screen and (max-width:728px){
.flex {
flex-direction:column;
}
.col1 {
height:250px;
}
}
<div class="flex">
<div class="col1">
<div class="bg">
<div class="text_area"><div class="title">Title</div>
<div class="description">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
<div class="col2">
<div class="bg2">
<div class="text_area"><div class="title">Title</div>
<div class="description">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="bg3">
<div class="text_area"><div class="title">Title</div>
<div class="description">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</div>
这篇关于Flexbox填充(占用宽度超过100%)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文