如何將此Flex-Box物品移動到img的旁邊？

-2

如何將此Flex-Box項目移動到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; }`

來源

2017-05-06 Méhdi ZaRhoun

發帖最低工作的代碼片段，我們將能夠提出一個妥善的解決辦法 – LGSon

我已經做到了，你能刪除負面raiting？，感謝 –

我沒下來投票 – LGSon

如果添加的包裝中的文本<div class="wrapper">，添加display: flex;和刪除flex-wrap: wrap;他們會留下並排側

.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>

來源

2017-05-06 13:01:16 LGSon

如何將此Flex-Box物品移動到img的旁邊？

回答

相關問題