Question

我有这段代码：

HTML：

<div class="tile">
    <h3>short</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <h3>longLongLong longLongLong longLongLong</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

的CSS：

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

拨弄：

http://jsfiddle.net/v8Lhxk2v/

我得到了这个布局

但我需要得到类似下一张图片的内容，而不使用js。

可以解决吗？

Answer 1

根据浏览器支持，您可以使用flex。

容器需要：

display: flex;
flex-flow: column;

这是一个带有示例标记的快速演示：

http://jsbin.com/xuwina/3/edit?html,css,output

Answer 2

看看这个

http://jsfiddle.net/v8Lhxk2v/4/

在父元素上玩border-bottom和overflow:hidden。

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
    border-bottom: 22px solid #cecece;
    overflow: hidden;
}

.tile h3{
    min-height: 25px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    margin: 0 10px;
}

Answer 3

我想说尝试将内容绝对定位到磁贴的底部。在这种情况下，您可以设置内容应该结束的空间。仍然需要为您的内容添加一个额外的类，较小的标题要比标题较大的另一个标题大。

您的HTML将是：

<div class="tile">
    <h3>short</h3>
    <!-- Added an extra class to the div -->
    <div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

在你的CSS中我改变了这个：

.tile .content{
    height: 162px;
    background-color:grey;
    overflow: hidden;
    margin: 0 10px;
    position: absolute;
    bottom:30px;
}
.tile .small{height:216px;}

然后你得到这个结果：JSFIDDLE

如果这是一个适合您的解决方案，请告诉我。

Answer 4

使用flexbox解决此问题非常简单。

通过创建列flex容器，flex项目垂直堆叠。然后，您可以将flex: 1应用于文本框（.content），这样可以扩展容器的完整可用高度。

<强> HTML

<div id="container"><!-- container to align .tile boxes in flexbox row; 
                         (this flexbox is optional) -->
    <div class="tile">
        <h3>short</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

    <div class="tile">
        <h3>longLongLong longLongLong longLongLong</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

</div><!-- end #container -->

<强> CSS

#container {
    display: flex; /* establish flex container; 
                      aligns flex items (child elements) in a row by default; */        
}   

.tile {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* override default row alignment */
    height: 300px;
    width: 200px;
    background: #cecece;
    /* float: left; */
    margin: 0 10px 0 0;
}

.tile h3 {
    min-height: 20px;
    max-height: 61px;
    /* display: inline-block; */
    overflow: hidden;
}

.tile .content {
    flex: 1; /* tells flex item to use all available vertical space in container */
    height: 162px;
    overflow: hidden;
    margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}

DEMO

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多浏览器兼容性详细信息。

使用省略号（...）

如果要将省略号应用于单行文本，CSS使用text-overflow属性可以轻松实现。它仍然有点棘手（由于all the requirements），但text-overflow使其成为可能且可靠。

但是，如果你想在多行文字上使用省略号 - 就像这里的情况那样 - 那么就不要期望有任何乐趣。 CSS没有提供单一属性来执行此操作，并且解决方法是命中和未命中。有关详细信息和方法，请参阅我的答案：Applying Ellipsis to Multiline Text

Answer 5

嗯，非常简单......制作<div class="move"></div>并将你的h3放入其中，就像:<div class="move"><h3>Short</h3></div>现在样式那样移动div：

.move{height:100px;}

它工作了，你完成了：）

PS：用你的两个h3s制作：）

好吧，有一个代码：

的CSS：

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

.move{height:100px;}

HTML：

<div class="tile">
    <div class="move">
    <h3>short</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <div class="move">
    <h3>longLongLong longLongLong longLongLong</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 6

我会尝试另一种方法。使用jquery，您可以在窗口加载时计算最高height的{{1}}，然后将该高度应用于h3内的所有h3。

我知道你要求一个纯粹的css解决方案，所以如果我没有得到任何信任就可以了，但我认为这个答案可能对其他有相同问题的用户有用，这就是我写这个的原因。

这样的事情：

tiles

正如您在 JSFIDDLE 中看到的那样（请注意，我删除了您添加到标题中的固定var maxHeight = -1; $('.tile h3').each(function() { if ($(this).height() > maxHeight) maxHeight = $(this).height(); }); $('.tile h3').each(function() { $(this).height(maxHeight); });，并添加了第三个max-height长篇文章“所以你可以更好地检查一下。

Answer 7

试一试使用额外的use Aws\CloudFront\CloudFrontClient; $cle = new CloudFrontClient([ 'version' => 'latest', 'region' => 'us-west-2', 'credentials.ini' => [ 'key' => 'credentials\pk-myKey.pem', 'secret' => 'secret', ], ]); $result = $cle->getCloudFrontOriginAccessIdentity([ 'Id' => '****', // REQUIRED ]); print_r($result);并使用换行。 div＆amp; h3标记由额外的div.content包裹，而某些css将更改如下：

div

.tile > div {
  height: calc(100% - 20px);
  margin: 10px;
  overflow: hidden;
  line-height: 22px!important;
}
.tile {
  height: 300px;
  width: 200px;
  background: #cecece;
  float: left;
  margin: 0 10px 0 0;
}
.tile h3 {
  min-height: 20px;
  display: inline-block;
  overflow: hidden;
  margin: 5px 0;
}
.tile .content {
  margin: 0;
}

Answer 8

固定高度怎么样：

.tile h3 {
    height: 65px;
    display: inline-block;
    overflow: hidden;
}

或伴随着js（jQuery）：

// Height handler
var headHeight = 0;

// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {

    // Get current height
    var currentHeight = jQuery( this ).height();

    // If higher as handler set as handler
    if( currentHeight > headHeight ) {
        headHeight = currentHeight;   
    }

} );

// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );

这将是一个非常强大的解决方案...

Answer 9

您可以通过flexbox灵活方框布局模块解决：

.tile{
   ...
   /* add the following line */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   ...
}

http://jsfiddle.net/57yLgxsx/

此示例适用于Chrome，您可以在caniuse.com上检查浏览器的兼容性然后添加正确的前缀。

这取决于您希望确保兼容性的人（所有浏览器，移动设备或桌面或两者的最后2次版本）。

请记住，有两个版本的flexbox，“旧”和“新”。我上面写的是新的。

此链接可以澄清一些想法 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使div扩展以占用父容器的可用高度

9 个答案:

使用省略号（...）