HTML with image and text side by side with fix height

user_6186149 0
Viewed 211

I wanted to have multiple rows of images with text beside each images. After each rows, I want to have a horizontal line below. However, I am not able to get the height of each row to be consistent because the text can be 1 line or multiple lines. I could use "text-overflow: ellipsis" with max 2 text lines (to limit the text lines), but if there is only 1 text line, the height of each row would not be the same also.

Below are my codes:

        .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>

enter image description here

css html
1 Answers

Would this help?

I used flexbox to display the content side-by-side. I used -webkit-line-clamp to limit the number of lines then display the ellipses.

UPDATE: Added a javascript to check header and paragraph tag to center-align if the offsetHeight is greater than a set value. I used 20px in this example.

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>

user_124152870
Related