how to align all div inside a div next to each other

Blackranger 0
Viewed 43

I want to align all divs inside in a div next to each other and no other div of HTML has any effect on it

<div id="wrapper">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
    </div>
    <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
    </div>
    <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
    </div><div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
    </div><div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
    </div>
    </div>

my problem is that I can no assign id/class to inside div and if I try

div{
   float:left;
}

it affect every div of that HTML I want to only align item next to each other wrapper id's divs and idea and suggestion will be appreciated

css html
1 Answers

You can make the wrapper a flexbox using display: flex

#wrapper {
  display: flex
}
<div id="wrapper">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
</div>

kush0
Related