#DIV_1 {
bottom: -10px;
height: 176px;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: 10px;
width: 379px;
perspective-origin: 189.5px 88px;
transform-origin: 189.5px 88px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px -5px;
overflow: hidden;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
float: left;
height: 77px;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
border-right: 5px solid rgb(255, 255, 255);
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_2*/
#DIV_3 {
box-sizing: border-box;
float: left;
height: 77px;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 99px;
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 49.5px;
transform-origin: 94.75px 49.5px;
background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 5px solid rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 82px;
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 41px;
transform-origin: 94.75px 41px;
background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_5*/<div id="DIV_1">
<div id="DIV_2">
Ben Franklin
</div>
<div id="DIV_3">
Thomas Jefferson
</div>
<div id="DIV_4">
George Washington
</div>
<div id="DIV_5">
Abraham Lincoln
</div>
</div>
我有2列，其内容可能有不同的长度，因此它将有多行，所以我如何确保最少的内容行具有相同的高度？我无法像height:100px;那样使用固定高度，因为内容的长度可能会超过这个。
答案 0 :(得分：0)
您可以使用flexbox达到相同的高度。这是在外包装div上设置的：
#DIV_1 {
display: flex;
flex-wrap: wrap;
}
您还需要移除固定高度并漂浮在内部div上。如果您还希望内部div中的内容垂直居中，则可以显示：
#DIV_2,
#DIV_3,
#DIV_4,
#DIV_5 {
display: flex;
flex-direction: column;
justify-content: center;
}
#DIV_1 {
bottom: -10px;
display: flex;
flex-wrap: wrap;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: 10px;
width: 379px;
perspective-origin: 189.5px 88px;
transform-origin: 189.5px 88px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px -5px;
overflow: hidden;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
border-right: 5px solid rgb(255, 255, 255);
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_2*/
#DIV_3 {
box-sizing: border-box;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 49.5px;
transform-origin: 94.75px 49.5px;
background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 5px solid rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 41px;
transform-origin: 94.75px 41px;
background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_5*/<div id="DIV_1">
<div id="DIV_2">
Ben Franklin
</div>
<div id="DIV_3">
Thomas Jefferson
</div>
<div id="DIV_4">
George Washington
</div>
<div id="DIV_5">
Abraham Lincoln
</div>
</div>