嘗試使用 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

一種更現代的方法是使用flexbox ：

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

justify-content屬性定義了兩個元素如何彼此相鄰或彼此下方顯示。

Answer 2

首先，您需要從該部分中刪除 h2：

    <h2 class="content-title">
           Our Story
    </h2>

<section id="section_about" class="grid">
        <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>

然后給該部分一個顯示：flex。

#section_about {
    display: flex;
    flex-direction: row;
}

Answer 3

只需通過在 CSS 規則中對其應用適當的width來限制圖像容器的大小，並將其移動到包含文本的 DIV上方，以便文本可以漂浮在圖像旁邊和下方。

Answer 4

HTML

<div class="container">
    <div class="content-wrap about_content">
        <p>
            Pls text here
        </p>
    </div>

    <div class="about">
        <p>Pls text here</p>
    </div>
</div>

CSS

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