html - 如何使所有块的宽度相同?
问题描述
如何制作相同宽度的块?块必须填满屏幕的整个宽度,并从左边缘开始。
事实证明,只有最后一个块占据了整个宽度。最后第七块不应该填满整个宽度,它应该像前六个一样,但它应该是响应式的。我只需要使用 flexbox,媒体查询和脚本对我不起作用。
=
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
background: #000000;
}
header,
footer {
background-color: #ffffff;
padding: 20px;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 5px;
}
li {
width: 350px;
flex-grow: 1;
padding: 20px;
margin: 3px;
border-radius: 5px;
background-color: #1b6351;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.container {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<header>top</header>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<footer>bottom</footer>
</div>
</body>
</html>
解决方案
希望这对你有帮助!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
background: #000000;
}
header,
footer {
background-color: #ffffff;
padding: 20px;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 5px;
}
li {
/* width: 350px; */
flex-grow: 1;
padding: 20px;
margin: 3px;
border-radius: 5px;
background-color: #1b6351;
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 350px;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.container {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
}
<div class="wrapper">
<header>top</header>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<footer>bottom</footer>
</div>
推荐阅读
- python - 使用 libVLC Python 录制 RTSP 流
- python - 在 Python 中,如果两个数据框具有不同值的同一列,如何在 Id 上合并多个数据框并在列中创建一个列表?
- django - MPTT-类别树子类别未显示类别
- tree - 是否有可能找到这样一棵树的连接偏差?
- angular - 将 Onetrust cookie 同意横幅与 Angular 9 集成
- android - Delphi TListview - 搜索项目并自动滚动到该项目
- c - fgets - 考虑空字符
- google-calendar-api - Google Calendar FreeBusy API 未显示空时隙
- neo4j - 增加 Neo4j Sandbox 中的事务超时(Neo4j 浏览器版本:4.2.1)
- node.js - 如何连接到 Azure MongoDB 虚拟机