如何使圖像左對齊和內容右對齊？

Question

使用“引導程序”：“^4.3.1”
我嘗試使圖像左對齊，內容從右側浮動圖像並且在圖像下方可見（圖像下方沒有空白空間）。 我可以在 class single_forum_image_left_aligned離開float: left; 財產：

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

但這對我來說似乎不是一個好的決定。

有更好的解決方案嗎？

Answer 1

您無需在Bootstrap-v4+中編寫此類視圖的單行代碼
在Bootstrap-v4中有預定義的 class .float-left for float: left; 財產。

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