儿童身高问题
好吧，我有我的父母DIV (黑色)和3个孩子。
CSS规则：
#parent{
height:130px;
}
#description{
max-height: 80px;
}现在差不多就是这样了。
我想做什么，
#title应根据内部文本调整大小。它可以是从1行到5-6行的文本(这是一个span，可以是div -有什么区别吗？)
#city大约有99%的时间是一行文本(实际上是一个单词)。可能会发生文本太长的情况，需要将其包装成两行。
#description是一个div，不能超出父框。我需要它有动态高度-至于以后，我使用一些插件，根据它的高度剪短文本，并添加“.”最后。
图像显示了它现在的样子，当我在标题中放了太多的文字时，我希望描述是最大的80 if，但是如果#title占据更多的位置，它可能会更少。
编辑:更改后的图像
回答 4
Stack Overflow用户
发布于 2015-07-22 09:27:26
您可能想尝试使用flexbox进行这样的布局。它可能不会为您提供一个像素完美的布局类型的复杂规则，但它仍将是一个强有力的控制方式。
Fiddle: https://jsfiddle.net/abhitalks/kwq2L3y7/6/
片段
#parent {
border: 1px solid black;
height: 200px; width: 80px;
float: left; margin: 16px;
display: flex; flex-direction: column;
}
#title {
flex: 2 1 auto; /* can grow twice, can shrink, auto height */
border: 1px solid red;
overflow: auto;
}
#city {
flex: 1 1 20px; /* can grow, can shrink, accommodate in 20px */
border: 1px solid green;
overflow: hidden;
}
#description {
flex: 0 1 80px; /* cannot grow, can shrink, accommodate in 80px */
border: 1px solid blue;
overflow: hidden;
}<div id="parent">
<div id='title'>Title</div>
<div id="city">City</div>
<div id="description">Description</div>
</div>
<div id="parent">
<div id='title'>Long Title can be of several lines and can grow many lines</div>
<div id="city">City can be in 2 lines</div>
<div id="description">Description which is very long and it will not grow beyond 80px</div>
</div>
<div id="parent">
<div id='title'>Title</div>
<div id="city">City can be in 2 lines what if it is larger</div>
<div id="description">Description will remain at 80px</div>
</div>
Stack Overflow用户
发布于 2015-07-22 08:37:37
想要得到的东西，需要在#description中设置height: 100%。
像这样使用：
#parent{
border: 2px solid black;
overflow: hidden;
}
#description{
border: 2px solid blue;
height: 100%;
}您可以用省略号显示文本。
Stack Overflow用户
发布于 2015-07-22 08:41:35
我不明白您到底想做什么，但是您应该看看“溢出”方法，例如：
#parent{
overflow-y: hidden;
}或
#parent{
overflow-y: scroll;
}https://stackoverflow.com/questions/31557912
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号