html - 制作相同的长度并出现在列中
问题描述
我有以下结构
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='whatStyling'>
<div class='container'>
<div class='element'>
<p class='text'>Foo</p>
</div>
</div>
<div class='container'>
<div class='element'>
<p class='text'>Bar</p>
</div>
</div>
<div class='container'>
<div class='element'>
<p class='text'>Fooooooo Baaaaaar</p>
</div>
</div>
</div>
</body>
</html>
标记
#whatStyling {
display: flex;
flex-direction: column,
}
.container {
display: flex;
}
.element {
display: flex;
padding: 0.2rem 2.8rem 0.2rem 0.8rem;
min-width: 1rem;
background-color: rgb(255, 0, 0);
}
.text {
color: rgb(128, 128, 128);
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1.5rem;
background-color: rgb(255, 255, 255);
}
http://jsfiddle.net/g8ansow3/6/
我希望所有元素都相同width
,即与最长的“框”一样宽是 ( Fooooooo Baaaaaar
) 并显示为列。请注意,我需要display: flex;
在每个.container
. 我进一步不知道会有多少元素。
如果可能的话,我最外层的 div#whatStyling
需要什么样的样式flex box
。
解决方案
使用inline-flex
而不是flex
然后添加width:100%
#whatStyling {
display: inline-flex; /*Changed this*/
flex-direction: column; /* Corrected a typo here*/
}
.container {
display: flex;
}
.element {
display: flex;
padding: 0.2rem 2.8rem 0.2rem 0.8rem;
min-width: 1rem;
width:100%; /*Added this */
background-color: rgb(255, 0, 0);
}
.text {
color: rgb(128, 128, 128);
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 1.5rem;
background-color: rgb(255, 255, 255);
}
<div id='whatStyling'>
<div class='container'>
<div class='element'>
<p class='text'>Foo</p>
</div>
</div>
<div class='container'>
<div class='element'>
<p class='text'>Bar</p>
</div>
</div>
<div class='container'>
<div class='element'>
<p class='text'>Fooooooo Baaaaaar</p>
</div>
</div>
</div>
推荐阅读
- symfony - 如何在 Twig 中显示类型名称
- python - python UDP套接字检查连接
- php - PHP PDO firebird 模块不加载
- apache-nifi - Nifi docker安装
- ruby-on-rails - Rails 控制器使用命名空间覆盖路由
- google-cloud-datastore - GAE 数据存储复合过滤器不起作用
- javascript - 使用 Angular 7 的内部页面导航
- javascript - 假设 .pfx 文件在 Javascript 和 C# 中有密码,如何将 .pfx 证书转换为 base64 字符串
- reactjs - 如何将 iframe 中发布的消息接收到 ssr react 应用程序
- python - 在 Python 抓取脚本中请求多个 url