Question

我需要设置gentelella模板中的元素样式： https://colorlib.com/polygon/gentelella/contacts.html

这是我的实现

<div class="col-md-4 col-sm-4  col-xs-12 profile_details">
    <div class="well profile_view">
        <div class="col-sm-12 col-xs-12">
            <div class="crop col-md-4 col-sm-12 col-xs-12 text-center ">
                <img  src= "https://media-cdn.tripadvisor.com/media/photo-s/0d/bf/07/9b/post-card-view.jpg" alt="" class="img-icon-template img-fluid ">
            </div>
            <div class=" col-md-8 col-sm-8 col-xs-12">
                <div class="">
                    <h4  class="brief titolo_template"><i>TITLE</i></h4>
                    <div><i class="fa fa-user"><strong> user XXX  </i> </div>
                    <p class="descr_p"><i class="fa fa-file-text-o"> <strong> descr: </strong> </i>something</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 bottom text-center">
            <div class="col-xs-12 col-sm-12 emphasis text-left">
                <p class="">
                    <a>relase date </a><i>dd/mm/aaaaa @endif</i>
                </p>
                <div class="col-md-6  col-sm6">
                    <a class="btn-block btn-success btn-xs text-center"
                       role="button" id="btnT2"
                       href="/templateGraphic/idxxx"
                        <i class="fa fa-sort-amount-asc "></i>view tamplate
                    </a>
                </div>
                <div class="col-md-6  col-sm-6">
                    <a class="btn-block btn-info btn-xs text-center"
                       role="button" id="btnT1"
                       href="alo/oo"
                       class="btn btn-info btn-xs">
                        <i class="fa fa-comments-o"></i> get replies
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

正如你所看到的那样，没有固定的高度，如果有很长的描述，例如在最后一个方框中，那个方框将会变得越来越大。

问题是如果修复容器的最大高度不起作用，对于内部的事情也是如此，因为它使得所有响应规则和媒体查询无效。

我发现的唯一解决方案是使用

在

中删除文本

.descr_p{
     max-height: 90px;
     text-overflow: ellipsis;
     /* white-space: nowrap; */
     overflow: hidden;
 }

但如果取消注释白色空间：nowrap就像这样发生：

所以问题是2 :) 一个是确定最大尺寸并保持整个事物响应的最佳方法。我怎么能让“whitespace：nowrap”工作;

道歉，如果我问过愚蠢的事情，但我是css造型的新手。

Answer 1

您需要根据需要在 descr_p 中应用max-width属性。 max-height 不起作用。

.descr_p{
   max-width: 105px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

此外，您可以使用 flexbox 来设计布局。您不必担心文本的大小。

Answer 2

你的结构错了。如果将屏幕宽度减小到1180px以下。地址和手机号码没有空间。

您可以使用“媒体对象”并简化您的结构。 Media Object

对于身高问题，您可以使用以下jquery：

jQuery(function($) {
  var tallest = 0;
  $('.profile_view .col-sm-12').each(function() {
    var height = $(this).height();
    if (height > tallest) {
      tallest = height;
    }
  });
  $('.profile_view .col-sm-12').height(tallest);
});

固定高度配置文件框并保持响应

2 个答案: