Html Question posted in
Some basic documentation can be found here.

Html – When I try to display:flex the parent the images are not coming in a row

      <div class= "ban">
        <div class= "ban1">
         <img src= "Images/2.jpg">
    </div>
    <div class= "ban2">
     <img src= "https://img.freepik.com/vector-premium/plantilla-banner-plant-shop_401787-228.jpg">
    /div>
  </div>

    .ban{
    display:flex;
background: black;
transition: transform 0.3s ease-in-out;
width: 100%;
height: 100%;   
    }
    .ban >.ban1 img{

width: 15%;
height: 15%;
    }
    .ban >.ban2 img{
width: 40%;
height: 40%;
    }

Why flex wont work from parent to child containing img src when called. Please guide what am I doing wrong here.

Tags:

2

Answers


  1. 0

    their is a syntax error in (display:flex) . may this helps you

    Login or Signup to reply.
  2. 0 
    .ban{
    display:flex;
    background: black;
    transition: transform 0.3s ease-in-out;
    width: 100%;
    height: 100%;   
 }
 .ban >.ban1{
    width: 15%;
    height: 15%;
 }
 .ban >.ban2{
    width: 40%;
    height: 40%;
 }
 .ban1 > img,
 .ban2 > img{
    width: 100%
 }
     <div class= "ban">
        <div class= "ban1">
         <img src= "Images/2.jpg">
    </div>
    <div class= "ban2">
     <img src= "https://img.freepik.com/vector-premium/plantilla-banner-plant-shop_401787-228.jpg">
    </div>
  </div>

    Please add width to the image parent div instead of the image. Also you miss the 2nd image container div closing tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search