带有图像和文本并排固定高度的 HTML

Question

我想要多行图片，每行图片旁边都有文字。在每一行之后，我想在下面有一条水平线。但是，我无法使每一行的高度保持一致，因为文本可以是 1 行或多行。我可以使用最多 2 个文本行的“text-overflow: ellipsis”(以限制文本行)，但如果只有 1 个文本行，则每行的高度也不相同。

下面是我的代码:

        .iconDetails {
          margin-left:4px;
          margin-right:8px;
          float:left; 
          height:70px;
          width:100px; 
        } 

        .container2 {
          width:100%;
          height:200;
          padding:1%;
        }
        .column2 h4{
          font-size: 15px; font-weight: 600;  
          margin:0px 0px 0px 0px;
        }
        .column2 p{
          font-size: 13px; font-weight: 300;  
          margin:0px 0px 0px 0px;
        }

      <div class='container2'>
        <div>
            <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
        </div>  
      <div style='margin-left:10px;'>
      <h4>Title 1</h4>
              <p>Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text  </p>
      </div>
    </div>
    <hr>
        <div class='container2'>
          <div>
              <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
          </div>  
        <div style='margin-left:10px;'>
        <h4>Title 2</h4>
            <p>Body 2.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text  </p>
      </div>
      <hr>
      <div class='container2'>
        <div>
              <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
        </div>  
      <div style='margin-left:10px;'>
      <h4>Title 3</h4>
           <p>Body 3.. Text... Text ... Text ... Text...  </p>
      </div>
    </div>
    <hr>
      <div class='container2'>
        <div>
              <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
        </div>  
      <div style='margin-left:10px;'>
      <h4>Title 4 .... Text Text Text Text........ Text .... Text .... Text ... Text...</h4>
           <p>Body 4.. Text... Text ... Text ... Text...  </p>
      </div>
      </div>

Answer 1

这有帮助吗？

我使用 flexbox 并排显示内容。我使用 -webkit-line-clamp 来限制行数然后显示省略号。

更新: 添加了一个 javascript 来检查 header 和 paragraph 标签到 center-align 如果 offsetHeight 大于设定值。我在这个例子中使用了 20px。

var h4s = document.getElementsByTagName("h4");
    var ps = document.getElementsByTagName("p");

    for (var i = 0; i < h4s.length; i++) {
        countLines(h4s[i]);
    }

    for (var i = 0; i < ps.length; i++) {
        countLines(ps[i]);
    }

    //count the lines per element
    function countLines(element) {


        if (element.offsetHeight > 20) {
            return;
        }

        element.style.textAlign = "center";
    }

.iconDetails {
  height:70px;
  width:100px; 
} 

.container2 {
  width:100%;
  height:100px;
  padding:1%;
  display:flex;
  overflow-x: hidden;
}

.image-container {
  text-align: center;
  width:120px; 
}

.content-container {
  height: 100%;
  width:calc(100vw - 120px);
  overflow: hidden;
  text-overflow: ellipsis; 
}

.content-container > h4 {
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.content-container > p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
}

<div class='container2'>
    <div class="image-container">
        <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
    </div>  
    <div class="content-container">
      <h4>Title 1</h4>
          <p>Body 1.. Text... Text ... Text ... Text... Text... Text ... 

          Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... 

        Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... TexBody 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... 

      Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. 

    Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text t ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text  </p>
      </div>
</div>
<hr>
<div class='container2'>
    <div class="image-container">
        <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
    </div>  
    <div class="content-container">
      <h4>Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong Title is sooo loong </h4>
          <p>Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text  </p>
      </div>
</div>
<hr>
<div class='container2'>
    <div class="image-container">
        <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
    </div>  
    <div class="content-container">
      <h4>Title is short</h4>
          <p>Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong Body is sooo loong </p>
      </div>
</div>
<hr>
<div class='container2'>
    <div class="image-container">
        <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
    </div>  
    <div class="content-container">
      <h4>Title is kinda short Title is kinda short</h4>
          <p>Body is kinda long Body is kinda long Body is kinda long Body is kinda long Body is kinda long Body is kinda long</p>
      </div>
</div>
<hr>

<div class='container2'>
    <div class="image-container">
        <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
    </div>  
    <div class="content-container">
      <h4>Title is short</h4>
          <p>Body is short</p>
      </div>
</div>
<hr>