如何使图像左对齐和内容右对齐？

Question

With "bootstrap": "^4.3.1"
I try to make image aligned left and content which floats image from the right and would be visible below of the image ( without empty space under image ). I works ok to in class single_forum_image_left_aligned to leave float: left; property:

 .single_forum_image_left_aligned_wrapper { border: 3px dotted red; align-items:start; }.single_forum_image_left_aligned { display: flex; justify-self: flex-start; justify-content: flex-start; /*float: left;*/ padding: 2px; margin: 5px; max-width: 460px; max-height: auto; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="single_forum_image_left_aligned_wrapper"> <a class="a_link" > <img class="single_forum_image_left_aligned" src="imagepath/general-business.jpeg?dt=1606807690" alt="Mount Everest is found in which mountain range?"> </a> <p class="card-text " style="align-items:start"> Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> 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>

But that does not seems good decision for me.

Are there some better solution?

Answer 1

You don't need to write single line of code of this type of view in Bootstrap-v4+
In Bootstrap-v4 there is predefined class .float-left for float: left; property.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container py-3"> <div class="row"> <div class="col-sm-12"> <div class="d-block clearfix bg-light p-3 shadow"> <a class="float-left mr-3"> <img src="https://placeimg.com/150/150/animals" class="rounded"> </a> <p> Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> 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> </div> </div> </div>