嘿,我使用flexbox创建了布局,它看起来像什么:
如您所见,我在图片的两边都有要最小化/删除的空间。我怎样才能做到这一点?在下面发布我的代码:
的HTML:
<div class="movie-container" *ngFor="let movie of moviesArray;let
i=index">
<div class="upper-container">
<div class="upper-left">
<img src={{movie.poster}}>
</div>
<div class="upper-right">
<div class="title-more">
<div class="title-container">
Title
</div>
<div class="more-button">
More
</div>
</div>
<div class="ranking">ranking</div>
<div class="genre">genre</div>
<div class="runtime">Runtime</div>
<div class="director">Director</div>
<div class="description">description</div>
</div>
</div>
</div>
CSS:
.movie-container{
margin: 10px auto;
border: 1px solid #222;
width:80%;
}
.upper-container{
display: flex;
height: 200px;
}
.upper-left{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.upper-left img{
width:40%;
}
.upper-right{
flex: 3;
display: flex;
flex-direction: column;
height: 100%;
}
.title-more, .runtime, .director, .genre, .ranking{
border: 1px solid #222;
display: flex;
align-items: center;
}
.description{
flex-grow: 1;
border: 1px solid #222;
}
.lower-container{
border: 1px solid #222;
padding: 10px;
}
.title-more{
justify-content: space-between;
}
如果您可以向我展示两个选项,请将空间最小化以及如何完全删除它们,我将不胜感激。
衷心的感谢。
@Temani Afif帮助后进行更新-这是我最小化窗口时的结果{
最佳答案
从flex:1
删除.upper-left
并调整图像的某些CSS。罪魁祸首是width:40%;
,您限制了容器内图像的宽度,因此剩余的空间就是您拥有的空间。
.movie-container {
margin: 10px auto;
border: 1px solid #222;
width: 80%;
}
.upper-container {
display: flex;
min-height: 200px; /*use min-height to avoid issue with a lot of content*/
}
.upper-left {
display: flex;
align-items: center;
justify-content: center;
}
.upper-left img {
max-width:100%; /*added*/
max-height:100%; /*added*/
height:200px; /*added */
}
.upper-right {
flex: 1; /* 1 is enough*/
display: flex;
flex-direction: column;
height: 100%;
}
.title-more,
.runtime,
.director,
.genre,
.ranking {
border: 1px solid #222;
display: flex;
align-items: center;
}
.description {
flex-grow: 1;
border: 1px solid #222;
}
.lower-container {
border: 1px solid #222;
padding: 10px;
}
.title-more {
justify-content: space-between;
}
<div class="movie-container" >
<div class="upper-container">
<div class="upper-left">
<img src="https://picsum.photos/100/300?image=0">
</div>
<div class="upper-right">
<div class="title-more">
<div class="title-container">
Title
</div>
<div class="more-button">
More
</div>
</div>
<div class="ranking">ranking</div>
<div class="genre">genre</div>
<div class="runtime">Runtime</div>
<div class="director">Director</div>
<div class="description">description description description description description description description description description description description description description description description description description description description description description description description description description</div>
</div>
</div>
</div>
关于html - 使用flexbox(CSS)最小化/去除空白,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52693438/