Place text next to div-class with image-CodePudding

How can I add text next to an image in a div-class?

I'm working on a project to list movies. For each movie I list, I want there to be two descriptors--a flag icon and a genre hashtag(s). I'm having a hard time putting the text in the same line, right next to the flag/image. In my css, I was using .info to represent the genres, but it has not been added yet to my html because it's not showing up the way I want it to look.

I want to add text next to a flag icon (.italy) so it would look like this image

Any insight would be appreciated!!

.item-desc {
    background-image: Url('https://64.media.tumblr.com/a273ca5e593b171e3fb237974bf40c8c/7dfc5099f5485297-4e/s2048x3072/3f00eac237cd5d0db7ee1cb72fdf06b175db9679.jpg');
    height: 85px;
    box-shadow: -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, box-shadow 0.2s ease;
    will-change: transform, filter;
    
}

.subtitle {
    background-image: Url('https://64.media.tumblr.com/d3b90aee405195699e293f320c7da8df/9e2fb2468a7c651d-9f/s250x400/1952c00e74253264eb65fafbfc0a634a68b86704.png');
    padding:5px; 
    border:2px outset white;
    color:#fff;
    text-shadow: -1px 0  #000, 0 1px  #000, 1px 0  #000, 0 -1px  #000;
    transition:0.3s;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
}

.subtitle:hover{
    color:#000;
    text-shadow: -1px 0  #fff, 0 1px  #fff, 1px 0  #fff, 0 -1px  #fff;
}
.italy {
    background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/sony/336/flag-italy_1f1ee-1f1f9.png');
    height: 20px; width: 25px; background-size: cover;
}

.info  {
    font-style: normal; 
    padding-left: 35px;
}

   <!-- item one -->
        <article >
            <img src="https://m.media-amazon.com/images/M/MV5BOWYwOTBmOGMtZWZiNC00YjNjLWIzOTUtNGEzZWFkYTg1ZDdjXkEyXkFqcGdeQXVyMjgyNjk3MzE@._V1_FMjpg_UX1000_.jpg" alt="media image">
 
            <div >
               <div >lazzaro felice (2018)</div>
               <div >
               <div ></div>
               </div>
              
            </div></article>

CodePudding user response：

This is a perfect case where you'd use flexbox. You can find a very good guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. There's a lot to flexbox, but the main thing you can take away from it is that it will place and order the child elements from a parent into a specific fashion. In the example below I've set the display (flex-flow) in such a way that it will place all child items of .item-desc after each other horizontally. And will allow the items to be place on a new line if they would exceed the width of .item-desc.

To make sure that .subtitle still covers the entire row, I've set its width to 100%. This, in combination with flex-flow: row wrap; will make sure all other items will be placed on a new row.

.item-desc{
    display:flex;
    flex-flow: row wrap;
}

.subtitle{
    width:100%;
}

CodePudding user response：

put them in a div then give it flex display.

.item-desc {
  background-image: Url('https://64.media.tumblr.com/a273ca5e593b171e3fb237974bf40c8c/7dfc5099f5485297-4e/s2048x3072/3f00eac237cd5d0db7ee1cb72fdf06b175db9679.jpg');
  height: 85px;
  box-shadow: -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  
}

.subtitle {
  background-image: Url('https://64.media.tumblr.com/d3b90aee405195699e293f320c7da8df/9e2fb2468a7c651d-9f/s250x400/1952c00e74253264eb65fafbfc0a634a68b86704.png');
  padding:5px; 
  border:2px outset white;
  color:#fff;
  text-shadow: -1px 0  #000, 0 1px  #000, 1px 0  #000, 0 -1px  #000;
  transition:0.3s;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
}

.subtitle:hover{
  color:#000;
  text-shadow: -1px 0  #fff, 0 1px  #fff, 1px 0  #fff, 0 -1px  #fff;
}
.italy {
  background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/sony/336/flag-italy_1f1ee-1f1f9.png');
  height: 20px; width: 25px; background-size: cover;
  display: ;
}

.info  {
  font-style: normal; 
  padding-left: 35px;
}

.container {
  display: flex;
}

.container span {
  margin: 0 20px;
  font-size: large;
}

 <!-- item one -->
  <article >
    <img src="https://m.media-amazon.com/images/M/MV5BOWYwOTBmOGMtZWZiNC00YjNjLWIzOTUtNGEzZWFkYTg1ZDdjXkEyXkFqcGdeQXVyMjgyNjk3MzE@._V1_FMjpg_UX1000_.jpg" alt="media image">

    
    <div >
       <div >lazzaro felice (2018)</div>
       <div >
        <div ></div>
        <span>text</span>
        <span>text</span>
        <span>text</span>
       </div>
       
      
    </div></article>

CodePudding user response：

Go for the flexbox implementation.

.item-desc {
  background-image: Url("https://64.media.tumblr.com/a273ca5e593b171e3fb237974bf40c8c/7dfc5099f5485297-4e/s2048x3072/3f00eac237cd5d0db7ee1cb72fdf06b175db9679.jpg");
  height: 85px;
  box-shadow: -7px -7px 10px -5px transparent,
    7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0),
    0 55px 35px -20px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  margin: 20px; /* Added */
}

.subtitle {
  background-image: Url("https://64.media.tumblr.com/d3b90aee405195699e293f320c7da8df/9e2fb2468a7c651d-9f/s250x400/1952c00e74253264eb65fafbfc0a634a68b86704.png");
  padding: 5px;
  border: 2px outset white;
  color: #fff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  transition: 0.3s;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
}

.subtitle:hover {
  color: #000;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
.italy {
  background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/sony/336/flag-italy_1f1ee-1f1f9.png");
  height: 20px;
  width: 25px;
  background-size: cover;
}

.info {
  display: flex;
  flex: 1;
  justify-content: space-between;
  font-style: normal;
  padding-left: 35px;
}

.film.drama {
  display: flex;
  flex-direction: column;
}
.footer {
  display: flex;
  justify-content: space-between;
}

<article >
  <img
    src="https://m.media-amazon.com/images/M/MV5BOWYwOTBmOGMtZWZiNC00YjNjLWIzOTUtNGEzZWFkYTg1ZDdjXkEyXkFqcGdeQXVyMjgyNjk3MzE@._V1_FMjpg_UX1000_.jpg"
    alt="media image"
  />

  <div >
    <div >lazzaro felice (2018)</div>
    <div >
      <div ></div>
      <div >
        <div>#text</div>
        <div>#text</div>
        <div>#text</div>
      </div>
    </div>
  </div>
</article>