html - 在 CSS 中包装元素
问题描述
我正在尝试以这种方式包装元素以实现响应式布局。几乎用 float:left、flexbox、display:inline-block 尝试了所有的东西,但可以让它工作
希望这可以做到 CSS 如果必要,元素可以指定宽度
[aaaaaaaa] [bbbbbbbbbb] [ccccccccccc]
[dddd]
[aaaaaaaa] [bbbbbbbbbb]
[ccccccccccc]
[dddd]
[aaaaaaaa]
[bbbbbbbbbb]
[ccccccccccc]
[dddd]
我有这段代码,这是问题的核心。
<html>
<head>
<style>
.container {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.innercontainer {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.box {
margin-right:10px;
padding:5px;
background-color:#ddd;
border:1px solid black;
}
.innerbox {
margin-right:10px;
padding:5px;
background-color: #9e9;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="box">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div class="innercontainer">
<div class="innerbox">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div class="innerbox">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
<div class="innerbox" style="flex:0 0 300px">ddddddddddddddddddd</div>
</div>
</div>
</body>
</html>
谢谢
解决方案
您可以使用 实现所需的布局display: grid
。基本上在网格模板行上,您可以定义列在每一行上的排序方式:
.container {
display: grid;
grid-template: "a b c" auto "a d c" auto;
}
@media (max-width: 480px) {
.container {
grid-template: "a b" auto "a c" auto "a d" auto;
}
}
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.container div {
padding: 5px;
background-color: #9e9;
border: 1px solid black;
}
<div class="container">
<div class="a">AAAA</div>
<div class="b">BBBBB</div>
<div class="c">CCCCC</div>
<div class="d">ddddd</div>
</div>
您可以根据需要调整或添加新的媒体查询。
推荐阅读
- java - 从openFrameworks端(ofApp.cpp)向android JAVA发送字符串?
- html - 尝试在不使用 CSS HTML 中的表格的情况下制作 3 列,每列都有不同的内容
- php - 表单文本区域值不可见
- javascript - 使用 axios 发布请求调用获取解析错误,我无法弄清楚
- reactjs - 为什么状态变化没有进入减速器?
- reactjs - 试图在 React 中传递一个道具,但找不到方法
- javascript - 为什么使用`
- expo - Expo独立Android中最近的MapView问题
- excel - 用户表单不会循环通过“for循环”概述用户表单控件的要求
- python - 如何比较两个在python中都包含字符串的变量?