html - 调整宽度以使用弹性框填充可用空间
问题描述
如果无法添加字符框,我正在尝试调整容器的宽度。
这是 HTML
<section id="list_users">
<div id="list_users_fill">
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
<div class="character" id="me">
<div class="user_img">
<img src="../../assets/images/avatar.jpg">
</div>
<div class="user_name">LUCA</div>
</div>
</div>
</section>
还有CSS
main {
background: #F5F5F5;
margin: 20px;
-webkit-box-shadow: 0 3px 15px 1px rgba(0,0,0,0.05);
box-shadow: 0 3px 15px 1px rgba(0,0,0,0.05);
border-radius: 7px;
}
#list_users {
background: #684D43;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
border-radius: 7px;
padding: 10px;
}
#list_users > div {
background-color: rgba(0,0,0,0.3);
border-radius: 7px;
-webkit-box-shadow: inset 0 -1px 3px 3px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 3px 3px rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
margin: 0 auto !important;
padding: 0 10px 10px 10px;
}
.character {
width: 80px;
height: 100px;
background: #684D43;
border-radius: 3px;
text-align: center;
color: #E1DED1;
text-shadow: 0px 1px 0px rgba(0,0,0,0.6);
text-transform: uppercase;
font-weight: bold;
line-height: 27px;
margin: 10px 10px 0 0;
}
.user_img img{
margin-top: 3px;
width: 70px;
height: 70px;
border-radius: 3px;
}
但是尝试了一切,找到了一些关于 flex box 或 width 属性的东西。我不知道这是否可能,但我不认为。我只是失去了一些可以帮助我的细节。告诉我,谢谢!
解决方案
如果您试图使图像具有均匀的空间并在中心对齐,请尝试以下操作:justify-content: space-evenly
推荐阅读
- c++ - 在 c++ 中,upper_bound 和 lower_bound 如何与比较器一起工作?
- javascript - JQuery:如何选择一个没有带有id的父元素的类?
- python - 为什么'else'子句中的打印语句仍然执行?
- javascript - 水平平滑动量滚动
- reactjs - 路由器不渲染
- javascript - 用js点击网站上的“搜索我”按钮在“iFrame”中搜索
- png - Gimp 图层蒙版缺乏精度
- postgresql - postgres 损坏的共享内存
- r - enquote/quote/!! 在ggplot中工作
- python - 命令引发异常:NameError: name 'x' is not defined