css - 如何使用 flexbox 将内容包含在网格中?
问题描述
我想使用 flexbox 来包含网格的第二个 div 中的所有内容。在这种情况下,图片溢出,我不知道为什么。我希望它按高度调整大小并保持纵横比。
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
解决方案
您不能以必须使用 div 的方式设置按钮的最小高度。除非在调整图片大小时会导致奇怪的溢出问题。拿我试试调整窗口大小,看看是不是你想要的效果。
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper div{
width:100%;
height:100%;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
height:30%;
background: green;
}
img {
flex : 1;
max-height: 100%;
}
.custom-img{
display:block;
max-height:70%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<div class="custom-img">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
推荐阅读
- xslt - XSL 两个条件表达式 If Test
- r - 将变量粘贴到 mutate_at 函数中以改变特定列(如果存在)
- django - 如何在 Django 中对 JSON 列表类结构应用查询过滤
- javascript - 每次发送 Ajax 响应时都会更改值
- hibernate - Hibernate CascadeType.Persist 创建一个选择查询
- sql-server - 将 SQL Server onPrem 可用性组同步到 Azure SQL 数据库
- python - 无论不常见的成员如何,如何根据较长的列表对较短的列表进行排序?
- rust - 在过程宏中,如何检查字符串是否是有效的变量名而不是关键字?
- keras - 用于测试分类时,ktrain 包是否将输入嵌入与 bert 嵌入相结合?
- json - 将 CSV 中的 Json 哈希转换为 ruby 哈希