어떻게이 플렉스 박스 아이템을 img 옆으로 옮길 수 있습니까?

Question

Plz see image

어떻게이 플렉스 박스 항목을 img 옆으로 옮길 수 있습니까?

https://i.stack.imgur.com/eSy3w.png

<div class="brif fb"> 
       <div class="sml-con"><img class="sml-thumb" src="images/chosen/edward.jpg" alt=""></div> 
       <h3>The WhiteBeard Pirates</h3> 
       <div class="trai"> <i class="fa fa-video-camera mr5"></i> <span>Trailer</span></div> 
       <p>Meet the most unusual baby, known only as "Baby", who wears a suit, speaks with the voice and wit of Alec Baldwin, as he teams up with is seven-year old brother to stop the dastardly plot of the CEO of Puppy Co.</p> 

CSS

`.brif { width:69%; flex-wrap: wrap; padding:17px; align-items: flex- 
start; /* prevent the childs from taking full height */ } 

.brif .sml-con { width: 140px; height: 210px; } 

.brif .sml-thumb { width:100%; height:100%; } 

.brif h3 { padding: 9px 15px; } 

.brif .trai { background: #0397D6; padding: 5px 9px; border-radius:10px; 
margin:5px 0; } 

.brif .trai i{ margin-right:1px; }` 

Answer 1

당신은 그들이 나란히

.brif { 
 
    width: 69%; 
 
    display: flex; 
 
    padding: 17px; 
 
    align-items: flex-start; 
 
    /* prevent the childs from taking full height */ 
 
} 
 

 
.brif .sml-con { 
 
    width: 140px; 
 
    height: 210px; 
 
} 
 

 
.brif .sml-thumb { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.brif h3 { 
 
    padding: 9px 15px; 
 
} 
 

 
.brif .trai { 
 
    background: #0397D6; 
 
    padding: 5px 9px; 
 
    border-radius: 10px; 
 
    margin: 5px 0; 
 
} 
 

 
.brif .trai i { 
 
    margin-right: 1px; 
 
}

<div class="brif fb"> 
 
    <div class="sml-con"> 
 
    <img class="sml-thumb" src="images/chosen/edward.jpg" alt=""> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <h3>The WhiteBeard Pirates</h3> 
 
    <div class="trai"> 
 
     <i class="fa fa-video-camera mr5"></i> 
 
     <span>Trailer</span> 
 
    </div> 
 
    <p>Meet the most unusual baby, known only as "Baby", who wears a suit, speaks with the voice and wit of Alec Baldwin, as he teams up with is seven-year old brother to stop the dastardly plot of the CEO of Puppy Co.</p> 
 
    </div> 
 
</div>

유지됩니다 텍스트 <div class="wrapper"> 주위에 래퍼를 추가 display: flex;를 추가하고 flex-wrap: wrap;을 제거하는 경우