html - 尝试使用 HTML 和 CSS 在文本右侧对齐图像

Question

我正在尝试使用 HTML 将我的图像与文本对齐，到目前为止我已经尝试添加 float:right 但它似乎只是将 div 向下推。我也尝试添加溢出:隐藏但它似乎不起作用。
我正在使用媒体查询使该网站具有响应性，这就是我在将图像移动到文本右侧时遇到问题的地方，
我希望你能帮忙。

<section id="section_about" class="grid">
            <h2 class="content-title">
                Our Story
            </h2>
        <div class="content-wrap about_content">
            <p>
                The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
                confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
                on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
                eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
                brandishing a sword
                <br><br>
                Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
                touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
                sword
            </p>
            
        </div>

        <div class="about_img_container">
            <img src="./img/about_img.jpg" class="about_img">
        </div>
        
    </section>

CSS:

 .content-title {

font-family: 'Playball', sans-serif;
color: #C59D5F;
font-size: 2.5em;
padding: 5px 0;
margin-top: 10px;
 }

 .content-wrap p {

padding-left: 20px;
line-height: 30px;
 }

 .about_img{

padding: 0 10px;
 }

 @media(min-width: 1024px) {
.about_content {

    width: 50%;
    background: pink;
}

.about_img_container{
   background: red;
   margin: 150px;
   float: right;
   overflow: hidden;
}
 }

Answer 1

更多 现代 这样做的方法是使用 flex 盒 :
HTML

<div class="flex-container">
    <div class="content-wrap about_content">
        <p>
            Your Text here
        </p>
    </div>

    <div class="about_img_container">
        <p>sodfosdf</p>
    </div>
</div>

CSS

.flex-container {
    display: flex;
    justify-content: space-around;
}

对齐内容属性定义了两个元素如何彼此相邻或彼此下方显示。