Create a flexible CSS Layout for displaying user comments in a text balloon - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Create a flexible CSS Layout for displaying user comments in a text balloon

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

div.wrap {<!--from  w  w w  .j  a  v  a 2s  .  c  om-->
   width: 90%;
   margin: 0 auto 1em auto;
   position: relative;
}
div.wrap:first-child {
   margin-top: 1em;
}
div.comment {
   font-size: 1em;
   position: relative;
   margin-left: 60px;
   border-radius: 0.75em 0.75em 0.75em 0.75em;
   background-color: #ccc;
   line-height: 1.4em;
}
div.comment::before {
   content: attr(data-owner);
   border-radius: 0.75em 0.75em 0 0;
   background-color: #ccc;
   display: block;
   text-indent: 10%;
   border-bottom: 3px solid #999;
}
div.comment::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   border: 10px solid transparent;
   border-right: 10px solid #ccc;
   margin: -10px 0 0 -20px;
}
div.comment p {
   width: 80%;
   margin: 0 auto 1em auto;
}
img {
   position: absolute;
   top: 50%;
   width: 50px;
   float: left;
   border-radius: 10px;
   margin-top: -25px;
}
p + ol.postscript {
   width: 80%;
   font-size: 0.8em;
   margin: -0.5em auto 0 auto;
}
ol.postscript::after {
   content: '';
   height: 0.5em;
   display: block;
   clear: both;
}
ol.postscript li {
   float: left;
   margin-right: 0.5em;
}
ol.postscript li.date {
   float: right;
   margin-right: 0;
}
.wrap a:link,
.wrap a:visited {
   color: #333;
   text-decoration: none;
   border-bottom: 1px solid #333;
}
.wrap a:hover,
.wrap a:active,
.wrap a:focus {
   color: #f00;
   border-bottom: 1px solid #f00;
}


      </style> 
 </head> 
 <body> 
  <div class="wrap"> 
   <img src="https://www.java2s.com/style/demo/Opera.png"> 
   <div class="comment" data-owner="Dexter"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p> 
    <ol class="postscript"> 
     <li> <a href="#">link 1</a> </li> 
     <li> <a href="#">link 2</a> </li> 
     <li class="date">3 days ago</li> 
    </ol> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials