儿童身高问题

Question

好的，所以我有我的父母DIV（黑人）和3个孩子。

CSS规则：

 printStudentDetails(firstName, lastName, birthday);

实际上它现在几乎就是这样。

我想做什么

#parent{ height:130px; } #description{ max-height: 80px; } 应根据内部文字调整大小。它可以是一行到5-6行文本（它是#title，可以是span - 有什么不同吗？）
div就像99％的时间一行文本（实际上是一个单词）。可能发生的文字太长，需要包裹成两行 #city是一个div，它不能超出父框。我需要它具有动态高度 - 以后，我使用一些插件根据它的高度剪切文本并添加＆＃34; ...＆＃34;到底。

图像显示了它现在的样子，当我在标题中放入太多文字时，我想，描述最多为80px，但如果#description需要更多的话，可以更少。

JsFiddle

编辑：更改图片

Answer 1

您可能想尝试flexbox这样的布局。它可能无法为您提供像素的完美布局，但它仍然是一种强大的控制方式。

小提琴：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>

Answer 2

您想要获得的内容，您需要在#description中设置height: 100%。

像这样使用：

#parent{
    border: 2px solid black;
    overflow: hidden;
}
#description{
    border: 2px solid blue;
    height: 100%;
}

demo

您可以用省略号显示文本。

Answer 3

我不知道你想要做什么，但你应该看看'溢出'方法，例如：

#parent{
  overflow-y: hidden;
}

或

#parent{
  overflow-y: scroll;
}

Answer 4

如果您希望高度是动态的，可以尝试使用min-height

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

https://jsfiddle.net/arty_/x8f7v25h/