好的,所以我有我的父母DIV(黑人)和3个孩子。
CSS规则:
printStudentDetails(firstName, lastName, birthday);
实际上它现在几乎就是这样。
我想做什么
#parent{
height:130px;
}
#description{
max-height: 80px;
}
应根据内部文字调整大小。它可以是一行到5-6行文本(它是#title
,可以是span
- 有什么不同吗?)
div
就像99%的时间一行文本(实际上是一个单词)。可能发生的文字太长,需要包裹成两行
#city
是一个div,它不能超出父框。我需要它具有动态高度 - 以后,我使用一些插件根据它的高度剪切文本并添加" ..."到底。
图像显示了它现在的样子,当我在标题中放入太多文字时,我想,描述最多为80px,但如果#description
需要更多的话,可以更少。
编辑:更改图片
答案 0 :(得分: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>
答案 1 :(得分:0)
您想要获得的内容,您需要在#description中设置height: 100%
。
像这样使用:
#parent{
border: 2px solid black;
overflow: hidden;
}
#description{
border: 2px solid blue;
height: 100%;
}
您可以用省略号显示文本。
答案 2 :(得分:0)
我不知道你想要做什么,但你应该看看'溢出'方法,例如:
#parent{
overflow-y: hidden;
}
或
#parent{
overflow-y: scroll;
}
答案 3 :(得分:0)
如果您希望高度是动态的,可以尝试使用min-height
#parent {
min-height:130px;
width: 80px;
}
#description {
min-height: 80px;
}