create a flexible vertical line in between two divs - 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 vertical line in between two divs

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>flexible vertical lines</title> 
  <style>

ul {<!--   w w w  .j a v a  2 s. com-->
   list-style: none;
   padding: 0;
   margin: 0;
}
img {
   position: absolute;
   left: 0.2rem;
   top: 0;
   width: 3.125rem;
   height: 3.125rem;
   z-index: 2;
   border-radius: 50%;
}
li {
   position: relative;
   padding-left: 4.8rem;
   padding-bottom: 1.5rem;
}
li:after {
   position: absolute;
   content: '';
   width: 1px;
   height: 100%;
   border-left: 3px solid #cccccc;
   left: 1.75rem;
   top: 0;
   z-index: 1;
}


      </style> 
 </head> 
 <body translate="no"> 
  <ul> 
   <li> <img src="https://www.java2s.com/style/demo/Firefox.png"> <h2>Headline</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident, ipsam. Praesentium commodi, laboriosam ex aperiam. </p> </li> 
   <li> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <h2>Headline 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit maiores. Sequi earum aspernatur, dignissimos! </p> </li> 
   <li> <img src="https://www.java2s.com/style/demo/Safari.png"> <h2>Headline 3</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident, ipsam. Praesentium commodi, laboriosam ex aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident, ipsam. Praesentium commodi, laboriosam ex aperiam. </p> </li> 
  </ul>  
 </body>
</html>

Related Tutorials