如何使右边的文本在滑块下

Question

I have the slider and the text in a flex-direction: row container and I need the extra text to go under the slider.

I have tried giving them both display: inline-block and it still didn't work

 .prod__page__cont { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 50px; } .slider { display: block; } .description { display: block; } .slider img { max-width: 100%; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container prod__page__cont"> <div class="slider col-6"> <img src="https://ibizabestservices.com/wp-content/uploads/2019/03/img232.jpeg"> </div> <div class="description col-6"> Located just a few kilometres from the centre of Ibiza, the prestigious five-bedroom villa sits high on the hillside of the exclusive Roca Llisa residential area. Designed by notorious architect Jordi Carreño, the villa is an enclave of luxury and peace that blends with the surrounding countryside and breath-taking scenery of the Mediterranean Sea. The villa's interiors created by Paul Davies London are the archetype of open architecture; with sophisticated blend of classic and contemporary lines styled with artwork of exquisite taste by the celebrated French photographer Bettina Rheims and the French Irish artists Nick & Chloe. The villa stylish designed furniture matches with harmony the surrounded environment. </div> </div> 

and the other 2 elements have display block

Answer 1

In this particular instance, flex and/or bootstrap columns are not appropriate. Floats are the way to go (that hurt me to say).

 .prod__page__cont { margin-top: 50px; } .slider { width: 300px; height: 300px; background-color: #CCC; float: left; margin-right: 1rem; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container prod__page__cont"> <div class="slider"></div> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>