html - child 高度问题

Question

好的，所以我有我的 parent DIV(黑色)和 3 个 child 。

CSS 规则:

#parent{
   height:130px;
}
#description{
   max-height: 80px;
}

现在实际上就差不多了。

我想做什么

#title 应该根据里面的文字调整大小。它可以是 1 到 5-6 行文本(它是一个 span，可以是 div - 有什么区别吗？)
#city 就像 99% 的时间是一行文本(实际上是一个词)。可能会发生文本太长，需要换成两行。
#description 是一个 div，不能超出父框。我需要它具有动态高度 - 至于稍后，我使用一些插件根据它的高度剪切文本并在最后添加“...”。

图像显示了它现在的样子，当我在标题中放置过多文本时，我希望描述最大为 80 像素，但如果 #title 占据更多位置，则可以更少。

JsFiddle

编辑:更改图像

Answer 1

你可能想尝试 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>