我有以下结构
<!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/
我想让所有元素具有相同的宽度，即与最长的“框”一样宽 (Fooooooo Baaaaaar) 并显示为列。请注意，我需要在每个 .container 上使用 display: flex;。我还不知道会有多少元素。
我最外层的 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>关于html - 使 <div> 长度相同并出现在列中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51980755/