儿童身高问题

时间:2015-07-22 08:31:52

标签: html css

好的,所以我有我的父母DIV(黑人)和3个孩子。

CSS规则:

 printStudentDetails(firstName, lastName, birthday);

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

我想做什么

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

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

JsFiddle

enter image description here

编辑:更改图片

4 个答案:

答案 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%;
}

demo

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

答案 2 :(得分:0)

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

#parent{
  overflow-y: hidden;
}

#parent{
  overflow-y: scroll;
}

答案 3 :(得分:0)

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

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

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